Need help with AJAX, onreadystatechange and getElementByID

@mikemcleodJun 29.2007

Hello everyone,

Long time lurker, first time poster.

I’m trying to implement an AJAX inline editor and am having some trouble. I want to use this editing field several times on
the same page, and was hoping to make the JavaScript reusable, passing
it the name of the fields that need to change, but I’m having some
trouble. In particular, I’m having trouble here:

————

function sndReq(action) {
http.open(‘get’, action);
http.onreadystatechange = handleResponse;
http.send(null);
}

function handleResponse() {
if(http.readyState == 4){
var replaceText = document.getElementById(name_textbox).value;
document.getElementById(‘name_displaybox_contents’).innerHTML = replaceText;
document.getElementById(‘name_displaybox’).style.display = ”;
document.getElementById(‘name_editingbox’).style.display = ‘none’;
}

}
————

My thought was that at the <http.onreadystatechange = handleResponse;>
line I could pass the value of the field element I’m using on to the
handleResponse function and then use it to swap out the
getElementByIds so that I wouldn’t need to replicate all this code for
the different chunks I’m swapping out. However, the http.readyState
is making things difficult for me; for some reason, if I pass a
variable on to handleResponse, the “if (http.readyState == 4)” doesn’t get
tripped.

Does this make any sense? I don’t know, because it doesn’t make sense to me either. If you could help me out I’d be greatly in your debt!

Mike

to post a comment

JavaScript

6 Comments(s) _↴

@Banana_AnandaJun 29.2007 — #if I pass a

variable on to handleResponse, the "if (http.readyState == 4)" doesn't get

tripped.
[/QUOTE]

How are you passing a variable ?

@mikemcleodauthorJun 29.2007 — #Thanks for your response. I modified the script this way to pass the variable:

-----------------------
function sndReq(action, formelement) {

http.open('get', action);

http.onreadystatechange = handleResponse(formelement);

http.send(null);

}

function handleResponse(divVariable) {

if(http.readyState == 4){

var replaceText = document.getElementById(divVariable).value;

document.getElementById(divVariable).innerHTML = replaceText;

}

}
-----------------------

For some reason, when I modify the script in this way, the "if(http.readyState == 4)" condition does not get tripped - when I don't pass the variable, as in the first script example I posted, the script works just fine, but I have to put the full name of the div into the getElementById function.

Totally baffled. Any help is much appreciated!

Mike

@cridleyJun 29.2007 — #I don't think you can pass a variable as it is a callback. The only solution I have for this is by using a global variable.

[code=html]
 var gElem;
 
 function sndReq(action, formelement) {
 gElem = formelement;
 http.open('get', action);
 http.onreadystatechange = handleResponse(formelement);
 http.send(null);
 }
 
 function handleResponse(divVariable) {
 if(http.readyState == 4){
 var oElem = document.getElementById(gElem);
 var replaceText = oElem.value;
 oElem.innerHTML = replaceText;
 }
 }[/code]

I took the liberty of getting rid of the second document.getElementById

@Banana_AnandaJun 29.2007 — #Indeed. This wont work:

[code=php]http.onreadystatechange = handleResponse(formelement); // not what you want[/code]

This will assign the [I]returned value[/I] of the function call. In this case [FONT="Courier New"]undefined[/FONT]. (Kinda simple really, but a common mistake).

Use a global, as suggested, although this does run the risk that two overlapping requests could interfere with the value of the variable.

Another option is to assign an anonymous function...

[code=php]http.onreadystatechange = function(){ handleResponse(formelement)};[/code]

Will this closure cause memory leaks ?

I really can't remember any more.

@xydon1Dec 30.2009 — #var xmlhttp;

//str = the value of whatever your passing i.e. <option value="test"> test = str

//variableToPass = the name of the variable to pass to pageName i.e. test.htm?variableToPass=str

//pageName = page where your php queries and results comes from.

//divName = the div on the page your calling all this where the results will be displayed.

//Usage: onchange="ajaxResults(this.value,'table','getLists.inc','txtResults')

function ajaxResults(str,variableToPass,pageName,divName){

gElem = divName; //Global variable

xmlhttp=GetXmlHttpObject();

if (xmlhttp==null){

alert ("Browser does not support HTTP Request");

return;

}

var div = divName;

var url="../modules/"+pageName;

url=url+"?"+variableToPass+"="+str;

url=url+"&sid="+Math.random();

xmlhttp.onreadystatechange=stateChanged;

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}

function stateChanged(){

if (xmlhttp.readyState==4){

document.getElementById(gElem).innerHTML=xmlhttp.responseText;

}

}

function GetXmlHttpObject(){

if (window.XMLHttpRequest){

// code for IE7+, Firefox, Chrome, Opera, Safari

return new XMLHttpRequest();

}

if (window.ActiveXObject){

// code for IE6, IE5

return new ActiveXObject("Microsoft.XMLHTTP");

}

return null;

}

@xydon1Dec 30.2009 — #The above code is what you need on your .js file that you include on your main page. and call the function as such:

<select class="mySelect" onchange="ajaxResults(this.value,'table','getLists.inc','txtResults');">

<option value="">Please Select One...</option>

<option value="mktwishlist">My Wishlist</option>

<option value="myproducts">My Products</option>

</select>

Also in #JavaScript _↴

PayPal button - need multiple fields problem while using javascript table in IE question to case select - case $string possible?

Success!

Help @mikemcleod spread the word by sharing this article on Twitter...

Tweet This

Need help with AJAX, onreadystatechange and getElementByID

}
————

6 Comments(s) _↴

}
-----------------------

Also in #JavaScript _↴

Success!

Social

Version

Need help with AJAX, onreadystatechange and getElementByID

} ————

6 Comments(s) ↴

} -----------------------

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

}
————

6 Comments(s) _↴

}
-----------------------

Also in #JavaScript _↴