Question

Basically I have this code. I am trying to simply update a div but the first innerHTML call either does not work or never renders in the browser.

The second one does work though which appends “Complete” once the ajax call is complete. I’m sure it has something to do with the ajax call but I don’t see why this is happening because in Firefox there is no issue. Does anyone know what is wrong or if there is a bug in firefox or something? Why would IE even be waiting to render the innerHTML call. Shouldn’t the div be updated right after the call or does IE explorer wait a bit?

document.getElementById("status").innerHTML = '<div>Loading</div>';

$jQuery.ajax({
         type: "POST", 
         url: urlValue, 
         data: parameters, 
         cache: false,
         async: false, 
         dataType: "json"
});

document.getElementById("status").innerHTML = '<div>Complete</div>';

Answer 1

Why not just do it asynchronously?

var status = $('#status');

status.html('<div>Loading</div>');

jQuery.ajax({
    type: "POST", 
    url: urlValue, 
    data: parameters, 
    cache: false,
    dataType: "json",
    success: function() {
        status.html('<div>Complete</div>');
    }
});