Execute multiple ajax calls on page load ?

MichaelHe

I have a site where I have some ajax scripts that are executed by a click on a button like this:
<input type="button" onClick="UpdateArtist('', '<?echo $userid;?>', '', 'showartist', '');">
<input type="button" onClick="UpdateTitle('', '<?echo $userid;?>', '', 'showtitle', '');">
... and so on
And I have 4 of these..

They are lists that is updated by clikcing the artists and titles, so the lists are echoed from a database in the php list files the ajax is opening.

The Ajax scritps there are calling looks like this:

function UpdateArtist(Artist, ID, Task, sideElement, kaldMessage) {
     document.getElementById(sideElement).innerHTML = kaldMessage;
     try {
     req = new XMLHttpRequest(); /* f.eks. Firefox */
     } catch(e) {
       try {
       req = new ActiveXObject("Msxml2.XMLHTTP");  /* IE-versioner */
       } catch (e) {
         try {
         req = new ActiveXObject("Microsoft.XMLHTTP");  /* IE-versioner */
         } catch (e) {
          req = false;
         } 
       } 
     }
     req.onreadystatechange = function() {svarUpdateArtist(sideElement);};
     req.open("GET","ArtistList.php" + "?Artist=" + Artist + "&ID=" + ID + "&Task=" + Task,true);
     req.send(null);
  }



function svarUpdateArtist(sideElement) {
   var output = '';
   if(req.readyState == 4) {
      if(req.status == 200) {
         output = req.responseText;
         document.getElementById(sideElement).innerHTML = output;
         }
      }
  }

Only the function name is diffent in the 4 ajax calls..

So... When I run the site, there are no lists shown on the site, but when I click on the buttons the lists are shown, and they are ready to click on...

BUT... the idea is that these lists have to be shown when the page is loaded... I could do a onload in the body tag, but then the userid isn't transfered because the userid hasn't been made at that time in the script, and I can only execute 1 ajax in the onload function for some reason...

So how do I execute all 4 ajax scripts when the page is loaded ??

Krik

I could do a onload in the body tag, but then the userid isn't transfered because the userid hasn't been made at that time in the script

There is 2 assumptions there that are incorrect.

First, onload does not run until the entire page is loaded, all CSS javascript and HTML.

Second all php is processed before anything is output to the browser.

So in short yes an onload would work.

and I can only execute 1 ajax in the onload function for some reason

Yep, if you read up on the onload function it can only run one function. So that one function will have to be a function that runs the 4 other functions.

MichaelHe

Thanks for your answer...

But how do I execute all 4 ajax calls in one onload function ?

Krik

A function can execute another functions as such it can also execute 4 functions or as many functions as you want.

johanafm

And it's actually even possible to do it directly from the onload attribute

<body onload="dostuff(); domorestuff(); yetmorestuff();">

Although I personally would prefer having dostuff() call the other functions and keep the onload attribute to a minimum.

MichaelHe

ok... thanks again..

So the beginner question... How do I call a function in a function transfering an ID ?

If I need to execute this function UpdateArtist('', '<?echo $userid;?>', '', 'showartist', '') inside another function...

AND

function OnloadFunction(ID) {
UpdateArtist('', 'ID', '', 'showartist', '')
}

But that doesn't seem to work ?
It calls the function but the ID isn't transfered...?

johanafm

Use tags around code: php tags for php code, html tags for html code and code tags for other code.

There is a difference between string literals and variable identifiers

// OnloadFunction has one argument, called ID
function OnloadFunction(ID) {
	/* Call the function UpdateArtis with 4 strings as function arguments:
			arg1: '', empty string
			arg2: 'ID', this really is the string "ID", nothing else
	*/
	UpdateArtist('', 'ID', '', 'showartist', '')

var i = 0;

/* Call UpdateArtist with two strings "i" and "ID", as well as the two variables
	i and ID */
UpdateArtist('i', 'ID', i, ID);
}

MichaelHe

Thanks again, but I don't get it
I actually need 2 variables ?

And I type:

<body onload="OnloadFunction('25','parameter');">

And in my js file is type:

function OnloadFunction(ID, PAR) {
UpdateArtist('', 'ID', 'PAR', 'showartist', '')
}

But that doesn't work.. It just transfers the letters ID and PAR to the page UpdateArtist is executing and not 25 and parameter ??

The UpdateArtist ajax function is working fine else where...

johanafm

Yes, anything within single quotes, like

'this'

or double quote, like

"that"

is a string literal. Anything else refers to a variable, function name, keyword or language construct; that is,

"if";    // string literal containing letters i and f
if        // conditional statement, language construct

"doStuff();"    /* string literal containing the letters "doStuff" followed by characters left
                parenthesis, right parenthesis and semi-colon */
doStuff();    // function call

doStuff('ID', 'param');    /* function call with string literals containing texts
                    "ID" and "param" respectively */

var ID = 'ID';
var param = 'param';
doStuff(ID, param);    /* function call using variables ID and param
	                    which incidentally contain the strings "ID" and "param" respectively

sneakyimp

I would consider using onDomReady instead.