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
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();
});