CODEWITHSUNDEEP
ajaxinitializationgetelementbyid
TimFoolery
TimFoolery

Reputation: 1925

Element within AJAX-fetched HTML cannot by found by getElementbyID

It's because it hasn't initialized yet. If I put in an alert(), it allows the browser to be freed up and initialize the element. The question, then, is how can I force it to initialize the element without using an alert box?

Here's the pertinent code...

$().ready(function() { AJAX_LoadResponseIntoElement ("mybody", "skin1.txt"); AJAX_LoadResponseIntoElement ("contentdiv", "index.txt"); initPage(); });

AJAX_LoadResponseIntoElement (id, file) simply fetches "file" with an XMLHTTPRequest and loads it into id's innerHTML.

initPage() works until it calls setContentHeight(), which works up until this point:

if (DOMheight > y_lbound) { document.getElementById('containerdiv').style.height = (DOMheight+container_ymod) + 'px'; }

If I put alert(document.getElementById('containerdiv')); prior to this line, it says that it's NULL, even though the "containerdiv" element should have been loaded with the very first call to AJAX_LoadResponseIntoElement.

If I put TWO copies of alert(document.getElementById('containerdiv')); prior to this line, the first one says NULL, and the second says "[Object HTMLDivElement]".

Clearly, then, it is just a problem of "containerdiv" not being initialized.

So, once again, the question is how can I force the initialization of these elements after being fetched by the XMLHTTPRequest, without using an alert()?

Upvotes: 2

Views: 222

Answers (1)

Frédéric Hamidi
Frédéric Hamidi

Reputation: 263077

It seems that AJAX_LoadResponseIntoElement() is asynchronous, since it uses XMLHTTPRequest internally. One way to solve your problem would be to modify that function so it takes a callback function argument and calls it when the request succeeds:

function AJAX_LoadResponseIntoElement(elementId, fileName, callback)
{
    // Issue XMLHTTPRequest and call 'callback' on success.
}

Then use the modified function like this:

$(document).ready(function() {
    AJAX_LoadResponseIntoElement("mybody", "skin1.txt", function() {
        AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage);
    });
});

Upvotes: 4

Related Questions