Question

I want it to show the div relating to the tab if it = 1, or hide it if it = 0.

Script:

function blah(){
 loadtab('a');
 loadtab('b');
 loadtab('c');
}

var page = cheese

function loadtab(tab){
    $('#'+tab).hide();
    $('#'+tab).load("devices/" + page + ".html " + "#" + tab);
        var tabcontent = $("#"+tab).text();
        alert(tab); //works
        alert(tabcontent); //doesn't
        if (tabcontent == "1"){
            $('#'+tab).show();
        }
        else{
            $('#'+tab).hide();
        }
}

*variable defined in previous code

HTML on cheese.html:

<div id="a">0</div>
<div id="b">0</div>
<div id="c">1</div>

Alerting tab gives a, b and c in seperate alerts. Alerting tabcontent gives a blank alert. Why is this?

Answer 1

Seems like you’re getting the text before the load method finishes populating the tab. Try executing your code in the callback of .load.

$('#'+tab).load("devices/" + page + ".html " + "#" + tab, function(){ 
   var tabcontent = $("#"+tab).text();
    alert(tab); //works
    alert(tabcontent); //doesn't
    if (tabcontent == "1"){
        $('#'+tab).show();
    }
    else{
        $('#'+tab).hide();
    }
});

On a side note, you should probably cache $('#'+tab) as you use it pretty often in that function.

To cache your selector, simply do this.

 var $tab = $('#'+tab);  // store your jQuery object into a variable 
 $tab.hide();
 $tab.load("devices/" + page + ".html " + "#" + tab);
     var tabcontent = $tab.text();
     alert(tab); //works
     alert(tabcontent); //doesn't
     if (tabcontent == "1"){
         $tab.show();
     }
     else{
         $tab.hide();
     }

It just improves performance as jQuery doesn’t have to keep searching the DOM for the tab, you simply keep reference to it in another variable at the start of your function.