IE: jQuery.show() only shows element when using alert() before/after show

Question

I'm trying to add a simple 'wait box' on a javascript function, like this:

function caricaElenco(indice) {
    (...)
    $("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
    (...)
    $("[id*=Wait1_WaitBox]").hide();
}

And it's working good on Firefox, but not on Internet Explorer 11, that's not showing it. The HTML is:

<div id="ctl00_Wait1_WaitBox" class="updateProgress">
    Attendere...<br />
    <img src="../Images/wait.gif" align="middle" />
</div>

The weirdest thing is that I try this, for a simple check:

function caricaElenco(indice) {
    (...)
    alert($("[id*=Wait1_WaitBox]").css('display'))
    $("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
    alert($("[id*=Wait1_WaitBox]").css('display'))
    (...)
    $("[id*=Wait1_WaitBox]").hide();
}

And it's working, I mean that it's showing the alert with 'none' and after 'block'... And it's showing the box too! But not without the alert... Why?

UPDATE:

Tried with [id*="Wait1_WaitBox"], but it's the same. jQuery version is 1.8.2.

With

it's working only with the alert

I mean that if I do:

function caricaElenco(indice) {
    (...)
    alert('whatever');
    $("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
    alert('whatever');
    (...)
    $("[id*=Wait1_WaitBox]").hide();
}

It's showing the box, but if I do:

function caricaElenco(indice) {
    (...)
    $("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
    (...)
    $("[id*=Wait1_WaitBox]").hide();
}

It's not working (I mean not showing the 'wait box', but doing all the other stuff the function has to do in (...) correctly—load a gridview with an AJAX call) on Internet Explorer 11, in Firefox are both working. No JavaScript error.

UPDATE 2: Almost entire javascript function:

// Fill part of gridView
function loadList(index) {
    index = parseInt(index);
    buffer = 100; // Number of rows to load
    $("[id*=divGrid]").unbind('scroll');
    $('[id*="Wait1_WaitBox"]').show(); // Show loading 'wheel' 
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "PageName.aspx/webMethodName",
        data: '{id:' + $("[id*=hdnID]").val() + ', index:' + index + '}',
        dataType: "json",
        async: false,
        success: function (response) {
        if (index == 0) {
            (...)
            $("[id*=grid] tr:last-child").remove();
            var row = "<tr class='" + response.d[index].State + "'>";
            row += "<td class="Column1"></td>";
            (...)
            row += "<td class="DateColumn"></td>";
            (...)
            row += "<td class='columnN'></td></tr>";

            $("[id*=grid]").append(row);
        }
        row = $("[id*=grid] tr:last-child").clone(true);
        $("[id*=grid] tr:last-child").remove();
        if (index <= response.d.length) {
            if (index + buffer > response.d.length)
                var stop = response.d.length;
            else
                var stop = index + buffer;
            (...)
            for (var i = index; i < stop; i++) {
                var j = 0;
                (...)  
                $("td", row).eq(j).html("<span id='lblCodeNumber" + i + "' >" + response.d[i].CodeNumber + "</span>"); j++;
                (...)
                var effectDate = new Date(parseInt(response.d[i].effectDate.substr(6)));
                $("td", row).eq(j).html(effectDate.getDate() + '/' + (effectDate.getMonth() + 1) + '/' + effectDate.getFullYear()); j++;
                }
                (...)
                var toBeCounted = "";
                var checked = "";
                if (response.d[i].ToBeCounted != null)
                    toBeCounted = response.d[i].ToBeCounted .toString();
                else
                    toBeCounted = "true"; 
                if (toBeCounted == "true")
                    checked = "checked = 'checked'";
                else
                    checked = ""; 
                var rdToBeCounted = "<span><input type='radio' class='radio' " + checked + " name='ToBeCounted" + i + "' value='s' id='sToBeCounted" + i + "' />";
                rdToBeCounted += "<label for='s" + i + "'>YES</label>";
                if (toBeCounted == "false")
                    checked = "checked = 'checked'";
                else
                    checked = "";
                toBeCounted += "<input type='radio' class='radio' " + checked + " name='ToBeCounted" + i + "' value='n' id='nToBeCounted" + i + "' />";
                rdToBeCounted += "<label for='n" + i + "'>NO</label></span>";
                $("td", row).eq(j).html(rdToBeCounted); 
                $("[id*=grid]").append(riga);
                (...)
                riga = $("[id*=grid] tr:last-child").clone(true);
            }
            if (stop < response.d.length) {
                $("[id*=divGrid]").scroll(function (e) {
                    if (element_in_scroll(".congruenti tbody tr:last")) {
                        loadList($(".congruenti tbody tr:last td:last").html());
                    };
                });
            }
            $('[id*="Wait1_WaitBox"]').hide();
        }
    },
    error: function (result) {
        alert("Error! " + result.status + " - " + result.statusText);
    }
});
}

Answer 1

At the end you seem to be hiding it again $("[id*=Wait1_WaitBox]").hide();.

You need to show what goes in between these two lines.

It works with alert because the execution of the script is frozen until you close the alert (and that final line is not executed yet).