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

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.