Need help with AJAX, onreadystatechange and getElementByID

[mikemcleod]

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

[gRoberts]

you could try this:

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

function handleResponse(field) {
if(http.readyState == 4){
alert(field.id);
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';
}
}

[mikemcleod]

Thank you so much! Problem solved, YAY!

[moretea]

I'm having a similar problem; please forgive me for being a n00b to AJAX! Here's the code I'm working with:

function makeRequest(url) {

if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
http_request.onreadystatechange = postContents;
http_request.open('GET', url, false);
http_request.send(null);

}

function postContents() {

if (http_request.readyState == 4) {
if (http_request.status == 200) {
document.getElementById('chart').innerHTML = http_request.responseText;
} else {
alert('There was a problem with the request;' + http_request.readyState + ';' + http_request.status);
}
}

Why can't I add an argument (passing a DIV ID) to makeRequest, then pass it on to the postContents function? When I try, I get a type mismatch error upon calling postContents. Thanks in advance!

[gRoberts]

function makeRequest(url, param) {

if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
http_request.onreadystatechange = function() {
postContents(param);
}
http_request.open('GET', url, false);
http_request.send(null);

}

function postContents(param) {

if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(param);
document.getElementById('chart').innerHTML = http_request.responseText;
} else {
alert('There was a problem with the request;' + http_request.readyState + ';' + http_request.status);
}
}

you can then use makeRequest("someurl", document.getElementById('someparam'));

[moretea]

You da man! Many thanks!