Page 1 of 1

Ajax activity indicator

Posted: Thu Mar 01, 2007 5:49 pm
by webstyler
Hello

I have a page where I manage any textarea manipulation with ajax (jquery) and this can required time..

So I think to use a "progress bar" or "activity indicator" that help user to know that is running a process and denied any other "click" on page..

I have found this resource but not uderstand if/how use for create what I need

http://jquery.com/demo/thickbox/

Thanks

Posted: Thu Mar 01, 2007 5:58 pm
by nickvd
Thickbox is not what you need.. you probably want to take a look at the ajax functions that jQuery provides, specifically $.ajaxStart() and $.ajaxStop().

http://docs.jquery.com/Ajax#ajaxStart.28_callback_.29

Posted: Sat Mar 03, 2007 7:52 am
by webstyler
nickvd wrote:Thickbox is not what you need.. you probably want to take a look at the ajax functions that jQuery provides, specifically $.ajaxStart() and $.ajaxStop().

http://docs.jquery.com/Ajax#ajaxStart.28_callback_.29
Hi, thanks :)


I have try this

Code: Select all

 $().ajaxStart($.blockUI()).ajaxStop($.unblockUI);  
and is ok

But I need to block ONLY when time runnig for ajax is more than X seconds.

This because also for small operation (<= 2 second) is more long with blockUI

Possible to make this ?

I need also to custom block message, I have try to put this on blockUI() but not work :(

Thanks

Posted: Sat Mar 03, 2007 8:04 am
by feyd
the setTimeout() functionality may be of interest.

Posted: Sat Mar 03, 2007 9:55 am
by webstyler
I have try this:

Code: Select all

setTimeout("ajaxStart($.blockUI).ajaxStop($.unblockUI)", 3000);  // 3 seconds
but not working

Posted: Sat Mar 03, 2007 10:03 am
by feyd
It appears you're missing a part of the expression.

Posted: Sat Mar 03, 2007 10:11 am
by webstyler
feyd wrote:It appears you're missing a part of the expression.
ops

I have try first but not working, think to have make any other error before :)

now this is ok

Code: Select all

setTimeout("$().ajaxStart($.blockUI).ajaxStop($.unblockUI)", 6000);  // 6 seconds
But

1. is not really 6 seconds.. after 2/3 they start :(
2. after first timeout ALL ajax xall blockUI

I have made other errors ?

Thanks for help

Posted: Sat Mar 03, 2007 10:20 am
by feyd
The timer starts immediately upon the setTimeout() method being evaluated. If you want to stop it from firing, you can use clearTimeout().

Posted: Sat Mar 03, 2007 10:46 am
by webstyler
:'(

I have try this at first row of my script

Code: Select all


timeId = setTimeout("$().ajaxStart($.blockUI).ajaxStop($.unblockUI)", 3000);  // 3 seconds
clearTimeout(timeId);
But not work properly, after first timeout is always blockUI

I have also try to put into my primary function

Code: Select all


function moveOne(type) {
timeId = setTimeout("$().ajaxStart($.blockUI).ajaxStop($.unblockUI)", 3000);  // 3 seconds

// other code 

clearTimeout(timeId);
}
But seems not work

:(

Posted: Sat Mar 03, 2007 11:00 am
by nickvd
It doesn't look like you're using ajaxstart/stop as they're intended to be used (as i gathered from my use of them).

Code: Select all

$.ajaxStart(function(){
   $.blockUI();
});
$.ajaxStop(function(){
   $.unblockUI();
});
You then make your ajax requests as always and jQuery will run the functions you create to handle the start/stop of the ajax request.

Posted: Sun Mar 04, 2007 12:53 am
by Kieran Huggins
You're not timing things properly - you need to do things in the following order:

Code: Select all

$.ajaxStart(function(){
   ajaxTimer = setTimeout("$.blockUI()",3000);
});
$.ajaxStop(function(){
   clearTimeout(ajaxTimer);
   $.unblockUI();
});