CODEWITHSUNDEEP
jqueryshowdocument-ready
sports
sports

Reputation: 8147

Using jquery's show() after refresh

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):

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

Scenario 2 (problemo):

  1. Document is ready, #header is shown
  2. Do a browser's refresh (using F5 key)
  3. 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

Upvotes: 0

Views: 1353

Answers (2)

Kevin Lynch
Kevin Lynch

Reputation: 24723

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 *****
            }


    });
});

Upvotes: 1

EasyBB
EasyBB

Reputation: 6564

$(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

Upvotes: 0

Related Questions