Hiding a DIV with Javascript?

Question

I've got the code below, I've already set variable ShowLoading in another function. Could this be the reason? IE variables in javascript not being passed over when you start a new function? I also tried without opening a new function and adding onto an existing but with no Joy.

The DIV#Loading is based after the javascript.

$(document).ready(function() {
if(ShowLoading == true){
    $("#Loading").show();
}else{
    $("#Loading").hide();
}
});

ShowLoading is set here:

if ($.trim(ObjNumber) != ''){
    $.post('#URL#', {ObjNumber: ObjNumber}, function(data) {
        var ShowLoading = "No";
        $('div#Results-Data').html(data);
    });
}

Answer 1

If you use typeof() you can check to see if ObjNumber is undefined do not test it as ' ' if your expecting a number. Your test is not going to work if your checking for someObject != ' ' use typeof(someObject) === undefined then you will be getting back true if undefined and then you can show the div and hide it for false. You can also do tests to see if the object is a number, function or any javascript type. The only problem with your code is your if statement none of your code for showing or hiding is wrong. Keeping everything wrapped in the $(document).ready() is best practice so you know the DOM is fully loaded prior to manipulating the DOM. remember the DOM has nothing to do with your object ObjNumber and based on your question ObjNumber is loaded in after DOM_ready and is loaded in by a POST.

Do not test strings of "No" and "Yes", you should use a Boolean [true|false] for simple yes|no tests. Strings should not be used for this type of test. "Yes" and "No" mean nothing to a computer.

I would also like to point out you do not have a scope problem (assuming that the value ShowLoading is being initialized at some point prior to its test). Every time you call $() and passing in the search criteria. You are setting the scope of the DOM element search. It will start from the root of the DOM tree and traverse to the point of finding the element that meets that criteria. So when you call $("#Loading"), it will return the DOM element that has the id "Loading". This will return the correct DOM element every time. You do not have any scope problems with your current example. The return element will be in a local object within the scope of the function that called it.

The reason you would want to check that the DOM is fully loaded prior to doing anything with the DOM is to avoid errors like "undefined value has no attribute". If you attempt to access the DOM element prior to it being loaded you will get this error due to accessing an undefined object. All javascript actions should wait till DOM is fully loaded. All starting points for your code must be wrapped in a DOM ready check.

$(document).ready(function() {
  if (typeof(ObjNumber) === undefined){
    $("#Loading").show();//ObjNumber is undefined show loading screen and start loading stuff.
    //post your data and do what ever you need to do for loading here
  }else{
    $("#Loading").hide();//ObjNumber is defined. hide loading screen. everything is loaded.
  }
});

You do not need to set ObjNumber to the global scope like everyone is telling you. if you want to pass ObjNumber to another function to do loading then just do this.

$(document).ready(function() {
  if (typeof(ObjNumber) === undefined){
    $("#Loading").show();//ObjNumber is undefined show loading screen and start loading stuff.
    loadStuff(ObjNumber);
  }else{
    $("#Loading").hide();//ObjNumber is defined. hide loading screen. everything is loaded.
  }
});


function loadStuff(obj){
  //load some stuff using obj
}

This will eliminate any problems you have with loading up the global scope with a bunch of values that can turn your code into a rats nest.

To make this example even smaller you can assume that the object ObjNumber is undefined prior to DOM_ready as you're getting ObjNumber from a POST and you can't POST prior to the DOM loading. So you can show the loading screen at DOM_ready and simply hide it when load is finished. I have changed this next example from a POST to a GET as you're not posting data your really getting date.

/* have the loading screen set to display by default
* only hide it once the object is loaded.
* this way you don't have to keep checking if its 
* loaded just simply load it then hide the loading display.
*/
$(document).ready(function() {
  var ObjNumber;
  $.get("my url path to get value", function(data){
    ObjNumber=data;
    $("#Loading").hide();
  });
});

I would also like to comment that you should be using a GET when getting a value not a POST. POST is for setting values not getting values.

Answer 2

1. ShowLoading should be global.
2. ShowLoading should take boolean values true or false, instead of No and something else different from No.

Hope it's useful!

Answer 3

You should move ShowLoading to the global scope.

outside of your function initialize a global var;

var ShowLoading = false; // or true

modify your function

if ($.trim(ObjNumber) != ''){
    $.post('#URL#', {ObjNumber: ObjNumber}, function(data) {
        ShowLoading = false; // remove var to use global variable.
        $('div#Results-Data').html(data);
    });
}

your should be ok.

---

Another approach is to create a function which toggles loading element.

function Loader(what) {
   if(what == "show") {
      $("#Loading").show();
   } else if(what == "hide") {
      $("#Loading").hide();
    }
}

Show whenever you you want to show your loader you call Loader('show'); or Loader('hide'); to hide it;

if ($.trim(ObjNumber) != ''){
    Loader('show');
    $.post('#URL#', {ObjNumber: ObjNumber}, function(data) {
        Loader('hide');
        $('div#Results-Data').html(data);
    });
}

Answer 4

You are declaring ShowLoading variable in what seems a different scope, so, you cant access it from another function

This is your code:

$(document).ready(function() {
  if(ShowLoading == true){
    $("#Loading").show();
  }else{
    $("#Loading").hide();
  }
});
...
if ($.trim(ObjNumber) != ''){
    $.post('#URL#', {ObjNumber: ObjNumber}, function(data) {
        var ShowLoading = "No"; // this variable is only accessible 
                                // from this scope
        $('div#Results-Data').html(data);
    });
}

To fix the problem with the scope, I suggest (as the simplest alternative) to declare the variable in a common parent scope, something like that:

var ShowLoading; // declare the variable here
$(document).ready(function() {
  if(ShowLoading == true){
    $("#Loading").show();
  }else{
    $("#Loading").hide();
  }
});
...
if ($.trim(ObjNumber) != ''){
    $.post('#URL#', {ObjNumber: ObjNumber}, function(data) {
        ShowLoading = false; // you assign the variable as normal
                            // this variable can be accessed 
                            // from parent and sibling scopes too
        $('div#Results-Data').html(data);
    });
}

NOTE: Although there is no variable types on javascript, is preferable where possible to keep consistence on variables of use true/false for boolean, this would make the code a little more readable

WARNING: this solve the scope issue, but still remains another issue: a Race Condition, if your $(document).ready event handler is called before your callback for post, your "show loading" will never be hidden.

To fix this another issue, I suggest to hide the #Loading element in the post callback, this way:

/*var ShowLoading; No need for ShowLoading and it doesnt really help*/
$(document).ready(function() {
  $("#Loading").show();
});
...
if ($.trim(ObjNumber) != ''){
    $.post('#URL#', {ObjNumber: ObjNumber}, function(data) {
        // instead of setting ShowLoading = "No", we can hide the element
        // from here 
        $(document).ready(function() {
          // wait for document ready before hiding #Loading element
          // to avoid accessing uninitialized DOM
          $("#Loading").hide();
        });
        $('div#Results-Data').html(data);
    });
}

NOTE: if you are trying to check if ObjNumber is a number, is preferable to use something like that:

if (!isNaN(ObjNumber)){
...
}