Synchronizing multiple AJAX calls in window.onload() event

[steve.chambers]

I'm sure this q must have been asked before but I'm really struggling
to find the answer anywhere so have finally given up and will consult
the usenet community - hopefully there's someone out there who's seen
it all before and can help me out! I have a webpage which needs to
make some function calls after the page has loaded - won't go into
details surfice to say here is a code fragment:

function addLoadEvent(fu nc) {
var oldonload = window.onload;
if (typeof window.onload == 'function') {
window.onload = function() {
oldonload();
func();
}
} else {
window.onload = func;
}
}

addLoadEvent(my Function1);
addLoadEvent(my Function2);
addLoadEvent(my Function3);
...etc...

My problem is that some of these myFunction#s include AJAX calls but
the calls depend on each other in such a way that myFunction2 will not
work unless myFunction1 has completed. So what is the "nicest" way to
make sure of this? I've considered putting a hidden element in the
HTML and then changing it at the end of each function call and have
the onchange event trigger the next function call. But this seems very
hacky and overcomplicated - surely there must be a simpler and better
way....?

Cheers for any advice / suggestions,

Steve

[charles]

On 18 May, 22:17, steve.chamb...@ gmail.com wrote:

I'm sure this q must have been asked before but I'm really struggling
to find the answer anywhere so have finally given up and will consult
the usenet community - hopefully there's someone out there who's seen
it all before and can help me out! I have a webpage which needs to
make some function calls after the page has loaded - won't go into
details surfice to say here is a code fragment:

function addLoadEvent(fu nc) {
var oldonload = window.onload;
if (typeof window.onload == 'function') {
window.onload = function() {
oldonload();
func();
}
} else {
window.onload = func;
}
}

addLoadEvent(my Function1);
addLoadEvent(my Function2);
addLoadEvent(my Function3);
...etc...

My problem is that some of these myFunction#s include AJAX calls but
the calls depend on each other in such a way that myFunction2 will not
work unless myFunction1 has completed. So what is the "nicest" way to
make sure of this? I've considered putting a hidden element in the
HTML and then changing it at the end of each function call and have
the onchange event trigger the next function call. But this seems very
hacky and overcomplicated - surely there must be a simpler and better
way....?

Cheers for any advice / suggestions,

Steve

Could you use the readyState of one AJAX request to control the next
function?

[steve.chambers]

On 18 May, 23:43, charles <char...@boisve rt.me.ukwrote:

On 18 May, 22:17, steve.chamb...@ gmail.com wrote:

I'm sure this q must have been asked before but I'm really struggling
to find the answer anywhere so have finally given up and will consult
the usenet community - hopefully there's someone out there who's seen
it all before and can help me out! I have a webpage which needs to
make some function calls after the page has loaded - won't go into
details surfice to say here is a code fragment:

function addLoadEvent(fu nc) {
var oldonload = window.onload;
if (typeof window.onload == 'function') {
window.onload = function() {
oldonload();
func();
}
} else {
window.onload = func;
}
}

addLoadEvent(my Function1);
addLoadEvent(my Function2);
addLoadEvent(my Function3);
...etc...

My problem is that some of these myFunction#s include AJAX calls but
the calls depend on each other in such a way that myFunction2 will not
work unless myFunction1 has completed. So what is the "nicest" way to
make sure of this? I've considered putting a hidden element in the
HTML and then changing it at the end of each function call and have
the onchange event trigger the next function call. But this seems very
hacky and overcomplicated - surely there must be a simpler and better
way....?

Cheers for any advice / suggestions,

Steve

Could you use the readyState of one AJAX request to control the next
function?

I don't think so, you're right in that the readyState tells me when
the AJAX call has completed but my problem is I need to know when the
resulting funcion has completed its processing (e.g. one of my
functions writes information to a database, which takes time. As
always, probably some more example code will help explain what I mean:

function function1() {
var ajax_connection = createRequest() ;
ajax_connection .open('get', 'getinfofromser ver.php');
ajax_connection .onreadystatech ange = function() {
doSomeDatabaseS tuff(ajax_conne ction);
}
ajax_connection .send(null);
}

function doSomeDatabaseS tuff(ajax_conne ction) {
// Only proceed if the state change is a completion
if (ajax_connectio n.readyState == ReadyStateEnum. COMPLETE) {
// Do some database stuff here
...
}
}

[charles]

I have a webpage which needs to
make some function calls after the page has loaded - won't go into
details suffice to say here is a code fragment:

window.onload = function() {
myFunction1();
myFunction2();
myFunction3();
}

My problem is that some of these myFunction#s include AJAX calls but
the calls depend on each other in such a way that myFunction2 will not
work unless myFunction1 has completed. So what is the "nicest" way to
make sure of this? I've considered putting a hidden element in the
HTML and then changing it at the end of each function call and have
the onchange event trigger the next function call. But this seems very
hacky and overcomplicated - surely there must be a simpler and better
way....?

Could you use the readyState of one AJAX request to control the next
function?

I don't think so, you're right in that the readyState tells me when
the AJAX call has completed but my problem is I need to know when the
resulting funcion has completed its processing (e.g. one of my
functions writes information to a database, which takes time. As
always, probably some more example code will help explain what I mean:

function function1() {
var ajax_connection = createRequest() ;
ajax_connection .open('get', 'getinfofromser ver.php');
ajax_connection .onreadystatech ange = function() {
doSomeDatabaseS tuff(ajax_conne ction);
}
ajax_connection .send(null);
}

function doSomeDatabaseS tuff(ajax_conne ction) {
// Only proceed if the state change is a completion
if (ajax_connectio n.readyState == ReadyStateEnum. COMPLETE) {
// Do some database stuff here
...
}
}

In that case could you use the server response to control the timing?
Write the getinfofromserv er.php script so that when ajax_connection is
complete, you know all the processing on the server is complete. Then
you can call doSomeDatabaseS tuff safely.

Maybe I'm missing something simple, because I don't see how using a
form and onChange() would solve the problem.

[Skye Shaw!]

On May 19, 1:27 am, charles <char...@boisve rt.me.ukwrote:

My problem is that some of these myFunction#s include AJAX calls but
the calls depend on each other in such a way that myFunction2 will not
work unless myFunction1 has completed. So what is the "nicest" way to

//Maybe something like (untested):

var set1 = new Array({url:'bs. pl',fx:function 1},
{url:'morebs.pl ',fx:function2} );
var set2 = new Array({url:'foo .pl',fx:functio n3},
{url:'bass.pl', fx:function4});
var actions = new Array(set1,set2 );

for(var i in fx) {
requestChain(fx[i])
}
function requestChain(ch ain) {

var set = chain.shift();
var req = AJAXRequest();

req.onreadystat echanged = function () {
//AJAX state checks...
if( set.fx() ) {
if(chain.length 0) new requestChain(ch ain);
}
};

req.open('get', set.url);
//etc....
}

[Skye Shaw!]

On May 20, 3:14 am, "Skye Shaw!@#$" <skye.s...@gmai l.comwrote:

On May 19, 1:27 am, charles <char...@boisve rt.me.ukwrote:

My problem is that some of these myFunction#s include AJAX calls but
the calls depend on each other in such a way that myFunction2 will not
work unless myFunction1 has completed. So what is the "nicest" way to

//Maybe something like (untested):

<snip>

var actions = new Array(set1,set2 );

for(var i in fx) {
requestChain(fx[i])

}

oops, should be: for(var i in actions) {}

function requestChain(ch ain) {
if( set.fx() ) {
if(chain.length 0) new requestChain(ch ain);

new isn't necessary. Sorry, was a tad sleepy