Question

For the last few hours, I’ve been trying to use jQuery append() to append content from an XHR responseText into a div element (with an ID).

I have verified that I am getting the responseText back, all variables are correct, etc. I believe it has something to do with the attempt to append the responseText, which is HTML.

function fetchasyncClientData_Handler() {
    if (asyncajaxrequest.readyState==4 && asyncajaxrequest.status==200){
        $("#clientList").append(asyncajaxrequest.responseText);
    }
}

lastClientID = $("#clientList_Row input").last().val();

asyncajaxrequest = new XMLHttpRequest();
asyncajaxrequest.onreadystatechange = fetchasyncClientData_Handler();
asyncajaxrequest.open("GET", "fetchLatestClientList.php?id=" + lastClientID);
asyncajaxrequest.send();

Any ideas on what the issue may be? I do not want to use the jQuery.ajax() library / functions, might I mention.

Answer 1

You should pass the request on to the fetchasyncClientData_Handler function, and to do so you need to call the function with parenthesis, which you would do in a seperate function call on the readystate event, and that will let you check if the request succeeded before calling the fetchasyncClientData_Handler function :

function fetchasyncClientData_Handler(req) {
    $("#clientList").append(req.responseText);
}

var lastClientID = $("#clientList_Row input").last().val();

var asyncajaxrequest = new XMLHttpRequest();
    asyncajaxrequest.onreadystatechange = function() {
        if (asyncajaxrequest.readyState==4 && asyncajaxrequest.status==200){
            fetchasyncClientData_Handler(asyncajaxrequest);
        }
    }
    asyncajaxrequest.open("GET", "fetchLatestClientList.php?id=" + lastClientID);
    asyncajaxrequest.send();
​

You could just try calling the function like so instead :

asyncajaxrequest.onreadystatechange = fetchasyncClientData_Handler;

with the code you have, as all your variables are global anyway.

Whenever you write the function with the parenthesis you execute the function.