jquery ui tabs caching conundrum

Question

I am working on a web-app for my employer and I am using some jquery. I am fairly good at PHP, but lost in jquery. My question is as follows:

I have a a working tabs page that loads a monster PHP page when it first loads. I need to make sure that this particular tab only loads when the page is called (the first time only). I have the initial tab cached, and if you click on another tab everything is fine. The problem is that when you click a link from within the tab it reloads the monster PHP page. Here is the code:

       $(document).ready(function() {
    $("#frame").hide();
    $("ASA").tabs({ cache: true });
    $("#tabs").tabs();
});


function CH(ids){
        $("#tabs").tabs("select" , "#CH");
        $('#CH').load('test.php?id='+ids);
        cache : true
}

function onIFrameLoad() {
   $("#loader").hide('slow');
     $('#frame').slideDown('slow');
 }

Function CH is where I am having trouble (I guess). I have cache:true in there, but it was a shot in the dark. The only tab I want cached (at this point) is the main tab (ASA). Thanks for the help.

Answer 1

The correct syntax for using cache is

$( ".selector" ).tabs({ cache: true });

However, this would work only if each tab is loaded remotely (ie. ajax). There's no reason to do this if you use the original HTML structure given by the documentation, because all of the contents for all tabs are loaded all initially. You also cannot (as far as I can tell) turn caching on for individual tabs.

What we really need to see is what HTML structure you've got for this. Also, the selector $("ASA").tabs({ cache: true }); probably won't work, as ASA isn't a valid HTML element.

Answer 2

Sorry, I missed the last part of your statement. Here is the whole shotten match:

<script>
  $(document).ready(function() {
    $("#frame").hide();
    $("ASA").tabs({ cache: true });
    $("#tabs").tabs();
});


function CH(ids){
        $("#tabs").tabs("select" , "#CH");
        $('#CH').load('test.php?id='+ids);
        cache : true
}

function onIFrameLoad() {
   $("#loader").hide('slow');
     $('#frame').slideDown('slow');
 }

    </script>
        <div id="tabs">
    <ul>
        <li><a href="#ASA"><span>Stateside Assignment</span></a></li>
        <li><a href="#MAP"><span>Map</span></a></li>
        <li><a href="#DET"><span>Church Details</span></a></li>
        <li><a href="#CH"><span>Contact History</span></a></li>
    </ul>
    <div id="ASA">
        <iframe id="frame" src="sa_file_txt.php"  onload='onIFrameLoad();' frameborder="0" width="100%" height="500px">Download Firefox you silly</iframe>
        <div style="width:100%; height:500px;" id="loader"><center><br><br><img src="../images/ajax-loader.gif"/></center></div>
        </div>
        <div id="MAP">Please choose a file to look at from the Stateside Assignment tab.</div>
        <div id="DET">Please choose a file to look at from the Stateside Assignment tab.</div>
    <div id="CH">Please choose a file to look at from the Stateside Assignment tab.</div>
   </div>
</div>

As you can see the other tabs are initially loaded with blanks, waiting from the input from a function. I have only written one function for the CH tab so far.

Answer 3

Ok... so it is a complete hack/workaround, but I have a solution. I would love to hear the RIGHT way to do it if someone can direct me, but here is what I did:

In each tab I pre-load a blank iframe.
My links all now point to iframes instead of functions. Each iframe calls a function to "select" its tab from the parent.

Result is that after load the tab is shown and the main tab is never refreshed.

Again, I know it is a hack, if you have a better way please let me know.