Ajax activity indicator

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
webstyler
Forum Commoner
Posts: 85
Joined: Sat Feb 14, 2004 2:16 am

Ajax activity indicator

Post 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
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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
webstyler
Forum Commoner
Posts: 85
Joined: Sat Feb 14, 2004 2:16 am

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

the setTimeout() functionality may be of interest.
webstyler
Forum Commoner
Posts: 85
Joined: Sat Feb 14, 2004 2:16 am

Post by webstyler »

I have try this:

Code: Select all

setTimeout("ajaxStart($.blockUI).ajaxStop($.unblockUI)", 3000);  // 3 seconds
but not working
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

It appears you're missing a part of the expression.
webstyler
Forum Commoner
Posts: 85
Joined: Sat Feb 14, 2004 2:16 am

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

The timer starts immediately upon the setTimeout() method being evaluated. If you want to stop it from firing, you can use clearTimeout().
webstyler
Forum Commoner
Posts: 85
Joined: Sat Feb 14, 2004 2:16 am

Post 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

:(
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

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