using Ajax.Responders with multiple ajax requests

[gilpster]

Hi everyone, hoping for a gentle ride:

I mostly program actionscript rather than javascript, so although the
syntax is similar i get a little stuck now and then.

I'm using the global ajax.responders method to start an animation
whenever an ajax request is made, and stop the animation upon
completion of the request. however it does not work with synchronous
requests. The onSuccess method of my ajax requests work as they
should, however the timer continues to animate. It's as if the
ajax.responders onComplete method isn't called.

any idea what i'm doing wrong?

thx

kenneth


Ajax.Responders.register({
onCreate: function(){
ajaxPageTimer = new __ajaxTimer('ajaxPageTimerBox',100);
ajaxPageTimer.startAnimation();
},
onComplete: function(){
ajaxPageTimer.stopAnimation();
}
});


var mainPages = Array();
var myRequests = new Object;

function loadPages(pageSource, page) {
var url;
var i = 1;
//loadPage();
function loadPage() {
url = "incfiles/main" + i + ".php";
myRequests[i] = new Ajax.Request(url, {
onSuccess: function(transport){
mainPages[i] = url;
pasteMainContent.defer(transport.responseText, i);
i++;
if (i<menu.num+1) loadPage(); //so this is faux asyncronous
}
});
}
}

[T.J. Crowder]

Hi,

> It's as if the
> ajax.responders onComplete method isn't called.

Sorry, this is one of my pet peeves: Surely it would take seconds to
modify your code to find out for sure whether it is, rather than
speculating? ;-)

> however it does not work with synchronous
> requests.

I don't see any synchronous requests in the code you quoted.
Ajax.Request defaults to asynchronous unless you specify
"asynchronous: false" in the options. Synchronous requests are a very
bad idea; they completely freeze the UI of most browsers, so you're
best off continuing to leave the option out.

> any idea what i'm doing wrong?

Looking at that code, what if you have more than one request running
at a time? (And you do, in the code you posted, assuming menu.num is
at least 2.) Since you're using a global for the timer, Request A can
create a timer that gets started, then Request B starts a second timer
(overwriting the reference to the one created by Request A), then
Request A completes and clears Request B's timer -- Request A's timer
is left in limbo. You might want to only create the timer if it
hasn't already been created, and in the complete callback, use the
counter maintained by Prototype (discussed on the responders page[1])
to decide whether to stop it. Or use your own counter within the
timer, whatever route you want to go. I think if you look into those
issues a bit, the answer's probably somewhere in that area.

[1] http://prototypejs.org/api/ajax/responders

HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available

[T.J. Crowder]

Hi,

Sorry, forgot to say: I'm assuming that the commented-out loadPage
call near the top of loadPages isn't actually commented out?
Otherwise, it's unclear why anything is happening...

-- T.J.

[gilpster]

Thank you for your help crowder. When i said "It's as if the
ajax.responders onComplete method isn't called." I meant that i really
thought that it wasn't - i.e. just a turn of phrase.

you're right the commented out loadPage request was only commented out
because it wasn't working.

I've changed the code as you suggested and it works fine now. I
didn't realise all that stuff about writing over the original object
and losing the reference.

Anyway, it's sorted now, thanks for the direction

kenneth

ajaxPageTimer = new __ajaxTimer('ajaxPageTimerBox',100);

Ajax.Responders.register({
onCreate: function(){
if (!ajaxPageTimer.animating) ajaxPageTimer.startAnimation();

},
onComplete: function(){
ajaxPageTimer.stopAnimation();
}
});


var mainPages = Array();
var myRequests = new Object;

function loadPages(pageSource, page) {
var url;
var i = 1;