Page 1 of 1

AJAX call same function with different params

Posted: Thu Apr 03, 2008 8:36 am
by andrei.mita
~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.


Here I came again... Hello,

In my Ajax file I have 4 functions, one to create an xmlhttp instance, one to analyze the readyState and 2 to process the request. What I want to do is to output the results in different div's, depending on which function calls to see the readyState.

Code: Select all

 
var xmlHttp;
function XmlHttpObject(){  
//Creats XMLHTTP Object depending on the web browser
}
 
function stateChanged(){
    if (xmlHttp.readyState == 2 ){
        document.getElementById("shops_found").innerHTML='Request sent...';
    }
    if (xmlHttp.readyState == 3 ){
        document.getElementById("shops_found").innerHTML= 'Loading data...';
    }
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
        document.getElementById("shops_found").innerHTML=xmlHttp.responseText;
    }
}
 
function searchShops(){ 
//Send parameters to the php script to be executed
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}
 
This is the code I have and it's working fine but if change it to look like the one below, the div var is send to stateChange but everything else stops and no more output.

Code: Select all

 
function stateChanged([color=#FF0000]insertDIV[/color]){
    if (xmlHttp.readyState == 2 ){
        document.getElementById([color=#FF0000]insertDIV[/color]).innerHTML='Request sent...';
    }
    if (xmlHttp.readyState == 3 ){
        document.getElementById([color=#FF0000]insertDIV[/color]).innerHTML= 'Loading data...';
    }
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
        document.getElementById([color=#FF0000]insertDIV[/color]).innerHTML=xmlHttp.responseText;
    }
}
 
function searchShops(){ 
//Send parameters to the php script to be executed
    xmlHttp.onreadystatechange=stateChanged[color=#FF0000]('shop_found')[/color];
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}
 
I have a feeling the solution is very simple but my js knowledge is very limited, I've been learning it for a few days now. Thanks.


~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.

Re: AJAX call same function with different params

Posted: Thu Apr 03, 2008 9:04 am
by andrei.mita
Is it ok if declare var insertDIV outside the functions then in one of the process function set the value to the div I want and then use the var inside the readyState function?

It seems to work but is it ok?

Re: AJAX call same function with different params

Posted: Thu Apr 03, 2008 9:59 am
by pickle
Might I suggest using a Javascript library to VASTLY decrease the amount of work you have to do & eliminate potential bugs. I use JQuery.

Re: AJAX call same function with different params

Posted: Thu Apr 03, 2008 10:16 am
by EverLearning
If you want to pass arguments to an event handler, you need to use anonymous functions. Like in the code bellow:

Code: Select all

 
xmlHttp.onreadystatechange=function(){ stateChanged('shops_found') };
 

Re: AJAX call same function with different params

Posted: Fri Apr 04, 2008 6:18 am
by andrei.mita
Thanks a lot for the info.