Question

$("#multiselect").hide();
$("#multiselect_container").append('<img id="loader" src="/loader.gif" />');

Above 2 functions inside the $("#list").click() block are being skipped for some reason in IE, not FF, Chrome

$("#list").click(function() 
{           
    var selection = $(this).val();
    
    $("#multiselect").hide();
    $("#multiselect_container").append('<img id="loader" src="/loader.gif" />');

    $.ajax(
    {
        url: 'include/ajax.php?id='+selection,
        async: false,
        dataType: 'json',
        success: function (json) 
        {       
            $("#loader").remove();
            $("#multiselect").show();
                    
            //parse json
        } 
    });//json
});

What’s going on:

There is a button #list and a container #multiselect_container which holds #multiselect which is a select box of it’s container’s size.

When #list is clicked, the select box is hidden and the container beneath it is shown, with a loading bar.

When the ajax call is finished the loading bar is removed and the select box is shown again.

In Firefox this works perfectly fine. In IE it does not.

Things that I have tried:

• $('#list').ajaxComplete(function() {}); in the success section

• Sleeping the php file for 3 seconds. Same results, except with a delay.

• Removing the ajax block, those 2 calls are made properly.

• caching is not the issue, ajax calls are being made

Answer 1

You should change async: false to async: true. With async: false it would be normal behaviour for the display to not be updated until after the ajax call has completed. So that change might be enough to fix it. Otherwise read on…

I’ve had a similar problem with IE before, where it just didn’t want to update the display to show a “loading” type message while doing Ajax – even though the Ajax is asynchronous. It’s not that the functions themselves are skipped, just that the display doesn’t get updated until after the Ajax complete callback had executed too – and since the complete processing removes the “loading” message it’s as if it never existed from the user’s point of view. As with your code, my project worked fine in Firefox. It was a while ago, but if I remember rightly I got it to work in IE by introducing a short timeout on the Ajax call, something like this:

$("#list").click(function() 
{           
    var selection = $(this).val();

    $("#multiselect").hide();
    $("#multiselect_container").append('<img id="loader" src="/loader.gif" />');

    setTimeout(function() {
       $.ajax(
       {
           url: 'include/ajax.php?id='+selection,
           async: true,  // changed from false
           dataType: 'json',
           success: function (json) 
           {       
               $("#loader").remove();
               $("#multiselect").show();

               //parse json
           } 
       });//json
    }, 5);
});