jquery/ajax general question about limits and cache management

I'm trying to renew my company intranet using jquery, ajax and php. General aspect of the site is a drop down menu at the top loaded into a div and a content div where i load pages clicked on drop-down menu. The problem come out when inside content i load a page which inside have a tab menu, what i do when a tab is clicked is to load a html structure page with form and fill it by POST call.

The question is it correct load data when requested instead of pre-load it and show them when called as seen in a lot of example in the web? Working in my way I get a lot of data cached so when i click for confirm some data I send request several data instead of one.. what is the best way to work with this languages?

I find my goal solution suggested by Nathan I pre-load all data in one time for all forms, here is the code:

$("#div_0").show();
        $("#scheda_eti > div").css({"background-color": "white", "color": "black","cursor":"hand"}); //tabs div
        $("#"+schemi[0]).css({"background-color": "red", "color": "white","cursor":"default"});
        for (var x=0; x<schemi.length; x++)
        {
            $("#div_"+x).load("./schemi/sch_"+schemi[x]+".php", {azione: "vedi"});
        }
        $.post("./php/global.php",
            {azione:"vedi", contratto: $("#suggest_hidden").val() },
            function(xml)
            {
                if ($("status", xml).text()=="1")
                {
                    $(xml).find("form").each(function()
                    {
                        var id_form=$(this).attr("id");
                        scorriDati(xml, "form_"+id_form);
                    });
                }
                else
                {
                    $("#scheda_ris").html("<img src='./img/validno.png' alt='errore'> <span style='color:red'><p>Attenzione!<br>codice non trovato!</p></span>");
                }
                $(xml).find("errore").each(function()
                {
                    $("#scheda_ris").append("<img src='./img/validno.png' alt='errore'> <span style='color:red'>"+开发者_运维知识库$(this).text()+"<br></span>\n");
                });
            },'xml'
        );

To see some code you ca watch to my previous posts linked here: question1 question2

thanks in advance

ciao h

---

I think jQuery UI Tabs is what you're looking for. You need to include jQuery UI in your code, certainly after jQuery.

Order:

<link rel='stylesheet' href='http://jquery-ui.googlecode.com/svn/tags/latest/themes/ui-lightness/jquery-ui.css' />
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/jquery-ui.min.js'></script>

If you don't like the UI lightness theme, you can choose any from the Theme Gallery. For example, if you want the UI darkness theme, just replace ui-lightness with the theme's name in lowercase, and with hyphens instead of spaces.

---

I guess the answer to "is it correct load data when requested instead of pre-load it and show them when called?" is "which will the user prefer when switching to a different tab?"

1. no delay (all content loaded during initial page load)
2. short delay (ajax lookup of the new tab's content)
3. a full page load (a full round trip, no ajax needed)

In many cases you can get good results with the first or the third approach. Don't overuse Ajax.

Here's a blog rant about overuse/correct use of Ajax... I haven't honestly read it and don't necessarily endorse the whole thing, but it might help.