Question

I am calling loadAjax(); on a onClick event, but after I do the first one, it works, then after that, div.loading-ajax doesn’t show anymore, div.loading-ajax is permanently hidden.. Anyone know why its permanently hidden after the first time it’s done? Here is the code:

    function loadAjax() { 
    $("#dialog1").fadeIn();
    $("#loading-ajax").show();
    $("#loading-ajax").css("position","static");
    $("#dialog_text1").load("theurl", function() {
        $("#loading-ajax").hide();  }
     );}

HTML:

    <div id="dialog1">
    <div id="dialogtext1">
    <div id="loading-ajax" class="loading-visible">
    <p><img src="/images/loading.gif" /></p>
    </div>
    </div>
    </div>

The CSS:

    .loading-visible { display: block; position: fixed; } 

Answer 1

Your loading-ajax div is inside #dialogtext1 – the contents of “theurl” are going to overwrite it, removing it from the DOM. Move it outside #dialogtext1 and it should work fine.