jQuery Show and Hide Function's in Chrome

I have a Div which I want to say "Loading..." while an AJAX request is being performed. I am using a Real-Time engine called APE, so when an event comes in the first thing I do is show the Div and then set the HTML to "Loading..." like this:

$("#test").show();
$("#test").html("Loading...");

And then inside my ajax function I do this (I'm using ExtJS to load it into a grid):

    jsonfields = Ext.decode('[' + $.ajax({
    url: "ajax.php?getsensors="+raw.deviceId, 
    success: function(data) {

        $("#test").hide();

    },
    async: false
}).responseText + ']');    

So in Firefox the Loading div shows until it reaches the hide() function and then it disappears, in Chrome the Loading... div doesn't appear at all, and there are no errors in the console, any ideas why? Thank you!

   <div id="test"></div>

There's only one div with an ID of test, Also I have tried 开发者_高级运维

    $("#test").html("Loading...");

And then tried Emptying the test with empty(), still works in Firefox and mysteriously not in Chrome. I added in Loading to the test div, just to see what happens, on initial load it says loading, and then when the first AJAX request completes it empties the div successfully but it's never repopulated with Loading again.

Is that jQuery? Because I have something similar in Viajeros.com, set up like this:

 $("#loading_indicator").bind("ajaxSend", function(e){
    $(this).show();
 }).bind("ajaxComplete", function(){
    $(this).hide();
 }).bind("ajaxError", function(){
    $(this).hide();
 });

The "ajaxSend", "ajaxComplete" and "ajaxError" events are fired by jQuery's internal ajax call. http://api.jquery.com/ajaxSend/

I had the same issue. The loading animation was not hidden in ajax success. I just added 1 millisecond in the jQuery hide function.

function test() {
    $('#loading').show();
    $.ajax({
        type: "POST",
        url: "functions.asp",
        cache: false,
        crossDomain: false,
        dataType: "text",
        data: { action: "getData" },
        success: function (data, textStatus) {
            $('#loading').hide(1); // Added a millisecond
            // Do some actions
        },
        error: function (xhr, aOptions, rError) {
            $('#loading').hide();
        }
    });
}

pete,

user a loading gif for this kind of stuff ,

add a busy indicator next to the div you clicked and once the ajax succeeds remove it or hide it throught a class.

this is the most commpon practice

see this link

http://jquery-howto.blogspot.com/2009/04/display-loading-gif-image-while-loading.html

I've sometimes had issues with show and hide, if you don't actually pass in the paramter of fast or slow.

So:

$(this).show('slow);

or

$(this).hide('fast');

Just come across this issue myself. My solution...

To workaround this issue in Chrome, use a timeout on the AJAX call of one millisecond.

E.g.

$("#mySpinningLoader").show();

var t = setTimeout(function () {
    $.ajax({
        url: rootPath + controllerNAction,
        async: false,
        type: "POST",
        data: JSON.stringify(lightweightObject),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {
            $("#mySpinningLoader").hide();
        }
    });
}, 1);