jQuery show() method is not working on Chrome and IE browers

Question

I am showing a progress loader on my webpage when there are some processing going on in the background task. The problem I am facing is that the div which contains progress loader always stays "display : none " on Chrome and IE browser. However it works fine on FF and Safari.

Here is the HTML

<div id="progressIndicatorBackground">
  <div id="progressIndicator">
    <img src="/cms/images/icons/progressIndicator.gif" alt="Loading...">
  </div>
</div>

CSS

#progressIndicatorBackground, #preLoaderBackground {
    display: none;
    height: auto;
    width: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9000;
    position: fixed;
    background-color:rgba(0, 0, 0, 0.5);
}

JS function for showing and hiding progress loader

function progressIndicator(value) {

    if(value) {
        $("#progressIndicatorBackground").show();
    }
    else {
        $("#progressIndicatorBackground").hide();
    }
}

On several occasion I am calling the progressIndicator function. For eg In one of the page I am calling the function (This is just an example function I am using in my web app. There are other functions as well where I am calling progressIndicator function in the same way)

racingSubCategoryBindClick: function(id, parentId) {

        if ($('#'+id).css('display') != 'none') {
            $("#"+id).unbind();
            $("#"+id).live('click', function() {

                // Make all the rest of the group not active, not only this active
                $('.' + $(this).attr('class') +'.active').removeClass('active');
                $(this).addClass('active');

                progressIndicator(true);

                var menuId = $(this).parent().parent().attr('id'), day;
                if (menuId.indexOf(days.today) != -1) day = days.today
                else if (menuId.indexOf(days.tomorrow) != -1) day = days.tomorrow
                else day = days.upcoming;

                $.when(ajaxCalls.fetchEventsForCategory(id, parentId, day)).done(function (eventsMap) {

                    // There are no events
                    if (eventsMap.events.length == 0 || eventsMap.events[0].markets.length == 0) {
                        $('#mainError').show();
                        $('div.main').hide();
                    }

                    else {
                        $('#mainError').hide();

                        $('#'+id).addClass('active');

                        var events = eventsMap.events;

                        // If there are events
                        if (events.length > 0) {

                            var firstActive = racingNavigation.drawAllRaceNumbers(events);
                            racingNavigation.drawRaceView(events, firstActive);
                            // if 1st time and no next selections on the right
                            if ($('#tabaside').css('display') == 'none') racingNavigation.drawNextRaces(false, true, numberOfNextRaces);
                            $('.racing_nextraces').hide()
                        }
                        $('div.main').show();
                    }
                });

                $('.rightmain').show();
                $('#racing_home').hide();

                progressIndicator(false);
            });
        }
    },

When the background task is in progress and I am fetching JSON data the progress indicator should be visible after calling progressIndicator(true) and as soon as the processing is completed the display attribute should be set to none as I am calling progressIndicator(false) after everything is done. But the status of progressIndicatorBackground is never set display : block on Chrome and IE.

PS -> I am using latest version or Chrome and IE.

PSS -> I have tried modifying my function to but no luck. The problem still persist on Chrome and IE.

function progressIndicator(value) {

    if(value) {
        $("#progressIndicatorBackground").css("display", "block"); 
    }
    else {
        $("#progressIndicatorBackground").css("display", "none"); 
    }
}

Answer 1

The main problem was because of using synchronous AJAX calls. It does freezes Chrome and IE and stop any other events to fire up.

Progress loader wasn't working because it was waiting for the synchronous ajax calls to finish loading the event.

Original AJAX call

fetchEventsForCategory: function (categoryId, parentId, day) {

        var to = (date.getTo(day) == null) ? '' : '&to=' + date.getTo(day);

        return $.ajax({
            url: "/billfold-api/betting/events",
            type: "POST",
            data: 'scid=' + categoryId + '&pcid=' + parentId + '&from=' + date.getFrom(day) + to,
            dataType: "json",
            async: false,
        });
    },

Modified AJAX call with success callback

fetchEventsForCategory: function (categoryId, parentId, day) {
        var to = (date.getTo(day) == null) ? '' : '&to=' + date.getTo(day);

        return $.ajax({
            url: "/billfold-api/betting/events",
            type: "POST",
            data: 'scid=' + categoryId + '&pcid=' + parentId + '&from=' + date.getFrom(day) + to,
            dataType: "json",
            async: true,
            success: function(data) {
                progressIndicator(false);
            }
        });
    },

In my JS function where I was calling the progress loader. I removed progressIndicator(false); and instead put it under success function in my ajax call itself.

Answer 2

In my experience display:none can make things buggy and should only be used as a last resort. Take a look at this article here for alternatives. Also I found sometimes adding :hidden helps in making jquery show a hidden or display:none element. So for instance $("#progressIndicatorBackground:hidden").show(); might get it to work.