Using jquery's show() after refresh

Question

I have this div in every document:

 <div id="header" class="hide" style="top: 0px; width: 100%; z-index: 1000;">

And this script (in every document too):

$.ajaxSetup({ cache: false });

$(document).ready(function () {

    $("#loading-header").show();

    $.ajax({
        async: true,
        type: 'GET',
        url: '/PersonsAjax/Header',
        data: {},
        success: function (data) {

            $("#loading-header").hide();

            console.debug("Is there a header? " + $("#header").size());
            $("#header").show();  // **** PROBLEM *****
        }
    });

}

My problem is:
I'm experiencing a very weird behaviour, two scenarios:

Scenario 1 (OK):

Document is ready, #header is shown
Click a link
The new document is loaded and the #header is shown

Scenario 2 (problemo):

Document is ready, #header is shown
Do a browser's refresh (using F5 key)
The new document is loaded but the #header is not always shown.

My first thought was: "the document is still loading, and maybe there isn't a #header yet", but my console.debug proved that this wasn't the problem

What is happening?
Is there a well known problem with jQuery's show() and doing refresh? Please notice also that I'm preventing ajax calls to be cached. I double checked the ajax response and it brings the correct data

Have you tried to wrap the show in a timeout to see if it's a loading conflict? `setTimeout (function () { $(divToShow).show(); },2000);` if it does its a Dom content issue most likely. Also I believe ajax has a `done()` funtion which this should be where you at the show. — EasyBB, Jul 05 '14 at 21:18
I tried to prove that it is not a dom-loading issue by doing that "console.debug". If I find out that it is a loading issue, what can I do? because that timeout isn't very elegant as a final solution. Also I should mention that doing $("#header").show() in the console after a while does indeed display the header. — sports, Jul 05 '14 at 21:21
Ok so it's a loading issue. So what you should do is add the done — EasyBB, Jul 05 '14 at 21:22

score 1 · Accepted Answer · answered Jul 05 '14 at 21:52

1

I would use $(window).load(function() {}); instead of $(document).ready(function (){});, in this instance.

  $(window).load(function() {
     $("#loading-header").show();

        $.ajax({
            async: true,
            type: 'GET',
            url: '/PersonsAjax/Header',
            data: {},
            success: function (data) {

                $("#loading-header").hide();

                console.debug("Is there a header? " + $("#header").size());
                $("#header").show();  // **** PROBLEM *****
            }


    });
});

answered Jul 05 '14 at 21:52

Kevin Lynch

24,427
3
36
37

whats the difference between $(window).load and $(document).load? – sports Jul 05 '14 at 22:18
well I answer myself with this: http://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load, it sounds to be the answer, let me try and mark as accepted if it works. – sports Jul 07 '14 at 23:29
It did work, sorry the delay on accepting the answer. Now I'm still curious about when should I use $(document).ready vs $(window).load. I do understand the difference between them, though is not easy to say which one should I use in other scenarios – sports Jul 11 '14 at 03:06

EasyBB · Answer 2 · 2014-07-05T21:43:30.137

$(document).ready(function () {

    $("#loading-header").show();

    $.ajax({
        cache: false,
        url: '/PersonsAjax/Header',
        success: function (data) {
            $("#loading-header").hide();
            //console.debug("Is there a header? " + $("#header").size());
        }
      }).done(showHeader());
    });
    //add a looping function to check for header
    function showHeader(){
         var TO = 0;
         var header = document.getElementById('header');
         if(header){
           header.style.display="block";
         }else if( TO < 10 ){
           setTimeout(showHeader,100);
           TO++;
         }else{
          console.log("showHeader Timed out");
         }
     }

Ajax has a done function because onsuccess is only being requested from the httpResponse and not actually done. See how they wrote it Here in the jQuery Ajax API Documentation.

You can try that with the loop

I did some "refresh" tests and it still happends that sometimes the #header is shown and sometimes is not shown. It appears to have improved the "shown rate" though. — sports, Jul 05 '14 at 21:31
I've updated with a looping function but it does have a timeout as to not create an infinite loop. — EasyBB, Jul 05 '14 at 21:45

Using jquery's show() after refresh

2 Answers2