Question

<script>
function SimpleMS() {
    $('#ImagePlaceHolder').append("<img src='../images/ajax-loader.gif' />");
    alert(1);
    $.ajax({
        async: false,
        url: '@Url.Action("SimpleMACSerial")'
                        + "?MACSerial=" + $('#SerialMAC').val()
                        ,
        dataType: "json",
        cache: false,
        success: function (data) {
            alert(2);                     
        },
        error: function (data) {
            alert('Error');
        }
    });
    alert(3);
}  </script>

I see the following results

“1”

“2”

“3”

and

finally ajax-loader.gif shows up!

It should have showed before the first alert!

Why is this happening?

Thanks!

Answer 1

This is about how the browser handles the javascript. In this instance, you see that the browser you are using first executes all of its javscript and only after that starts interpreting the changes it made to the source, like the new image tag, which was there before the first alert, but only now gets rendered.