Ajax Loader Not Showing in Google Chrome

Question

Although this has been discussed many times here in Stackoverflow, I couldn't get the loader gif to display in Google Chrome. In Firefox 3.6, the code I have below works just fine for displaying the little gif whenever I make an ajax call but the same code won't display anything if working with Google Chrome. Since our customer uses Chrome I have to make sure it is compatible.

Here is the jQuery code which is inside the onLoad event:

var loader = $('<div id="ajax-loader" class="ui-corner-all"><span></span></div>')
                .appendTo("body")
                .hide().ajaxStart(function() {
        var relativeToDocument = false;
        var parent = loader.parent();
        loader
                    .css("top", (relativeToDocument ? $(window).scrollTop() : 0)
                                + (parent.innerHeight() / 2)
                                - (loader.height() / 2))
                    .css("left", (relativeToDocument ? $(window).scrollLeft() + parent.offset().left : 0)
                                 + (parent.innerWidth() / 2)
                                 - (loader.width() / 2))
                    .show();
                })
    .ajaxStop(function() {
                loader.hide();
    });

Does anyone know why it isn't displayed for chrome?

EDIT: Adding some of my markup below;

The css for the gif is here:

#ajax-loader { position: absolute; padding: 10px; }
#ajax-loader span { background-image: url("../images/ajax-loader.gif"); width: 32px; height: 32px; display: block; }

The page is here. Of course it looks bad because I haven't added the css files and other things. Plus, this is a MVC application so you won't have any data to load.

Answer 1

I know this is an old post but just in case someone is having the same challenge, all I had to do working on an MVC 5 application, was to install the Nuget package in Visual Studio: 'NWebsec.Mvc' and the application ran just fine.

Answer 2

I don't know if this will solve your problem, but your abuse of whitespace is atrocious even for a jQuery developer. I don't know why jQuery developers feel the need to chain every call they make on one line.

var top, left;
top = relativeToDocument ? $(window).scrollTop() : 0;
top += parent.innerHeight()/2 - loader.height()/2;
loader.css("top", top);
left = relativeToDocument ? $(window).scrollLeft() + parent.offset().left : 0;
left += parent.innerWidth()/2 - loader.width()/2;
loader.css("left", left);
loader.show();

Holy cow look at that! It now looks like a real programming language! Now you can actually maybe try logging or stepping through your problem with a debugger without wanting to blow your brains out.

Also it might also just be the case that Chrome is just faster so that the loading icon does appear, it just happens too quickly to notice. I doubt it, but sometimes when Chrome and Firefox differ it's been because Chrome was faster or loaded script resources quicker or something along those lines.

Answer 3

Whenever I have some cross-browser issues I think about markup first, then code. I'd suggest to run a validation (http://validator.w3.org/) and see what you find.. Also, if possible, attach part of your html markup so we can test it as well - nothing like team debugging :)

wait, I just noticed the div is empty, that means you must have used css to position the gif (background image?), please attach the relevant styling as well

edit:

1. OK, I took the liberty to fix the errors jslint pointed out (even meaningless semicolons) and forked it to a new jsFiddle. Notice how i stacked most of the js in 1 place.
2. Also, chrome should have a built-in "debugger" like firebug in firefox, maybe you can see the errors that comes up there as well.
3. Lastly, I know this is probably annoying to hear, but I really do suggest seperating styling, js code markup completely for better readability, and please try w3 validator

Answer 4

From what I can see in the first part of your code, you're creating a variable and you're using it in the ajaxStart function body declared in the variable. It looks like this might cause issues with the execution context and scope chains.

var loader = $('<div id="ajax-loader" class="ui-corner-all"><span></span></div>')
            .appendTo("body")
            .hide().ajaxStart(function() {
    var relativeToDocument = false;
    var parent = loader.parent();
    ...

Have you tried separating the definition of loader from the ajaxStart function? For example:

var loader = $('<div id="ajax-loader" class="ui-corner-all"><span></span></div>')
            .appendTo("body").hide();
loader.ajaxStart(function() {
    var relativeToDocument = false;
    var parent = loader.parent();
    ...