Loading and reusing content with jquery

I am new to JQuery and need som direction.

I have created a page with a few buttons. When I click one of the buttons, new content is loaded and put in one div. The buttons stays visible at all time.

When I click the other button, some other content is loaded from the server and put in the same div after I have emptied it.

In one of the button's content I have a "slideshow". When I switched between the contents a few times the animation gets corrupted. I think the problem I'm having is that I reload the content each time and adds it again to the same div. This isn't a good way anyway, I should reuse the content in some way.

My question(s) is:

1. how do I load content from a server and store it in some way in the client
2. check if the content is loaded already
3. reuse the content next time it should be shown instead of loading it from the server once again
4. not overlapping the content in any way

My scripts:

 $(document).ready(function() {
            $("#section2").load("main_mid.php"); 
              $("#taylor_made").click(function () {
                $("#section2").empty();
                $("#section2").load("taylor_made.php"); 
                });

            $("#sm_tool").click(function () {
                $("#section2").empty();
                $("#section2").load("main_mid.php"); 
                });
         });

My buttons:

 <div class="buttons_menu">
        <button id="sm_tool" class="big_buttons" type="button"><img src="sm_tool_button.png" alt="Angry face" /></button>
        <button id="taylor_made" class="big_buttons" type="button"><img src="taylor_made_button.png" alt="Angry face" /></but开发者_如何学JAVAton>
  </div>

The area the content is added to:

<div id="section2">

</div>

In my example above, I simplified the world a bit. In pratice, there will be a few (10-15) buttons with different content associated. It may be a bit much to load all at once. I'm updating my question. It's actually a normal web page where the menu is built up with buttons and links.

Also to be noted, some of the pages contains images and some have some kind of dynamic content (e.g. the slide shows loads and starts the animation with scripts when the content has been loaded).

Thank's in advance!

---

Either use query's data api. http://api.jquery.com/jQuery.data/ or load the content into 2 separate divs and toggle them with .hide() .show()

var price_page = null; 
$("#prices").click(function () {
    if(price_page==null){
        $("#section2").load("prices.php", function(data) {
            price_page = data;
            $("#section2").removeAttr("class").addClass("price_mid_area");
        }); 
    }else{
        $("#section2").html(price_page).removeAttr("class").addClass("price_mid_area");
    }
});

---

An easy way to accomplish your goal is to keep an invisible div that can store the content and just append to it. Or you can create a new invisible div with the content, then locate it later. For example you can do something like:

<div id="storagediv" style="visibility:hidden">

</div>



 $("#sm_tool").click(function () {

        //Check here if you need to do somewith with the existing content.
        $("#storagediv").load("main_mid.php");

                });

---

Store them in different hidden div's, and use hidden div's as source of your content. Check using if hidden divs has child elements (except text block)

---

you can use two different divs(one for taylor_made and other for sm_tool) instead of using only one. You can load them first time you click and can toggle between them from next time onwards.

---

Perhaps this would solve some of your issues:

Create two content divs, say "section2_sm_tool" and "section2_taylor_made", one of which is styled as "display:none".

In document ready, load both main_mid.php and taylor_made.php into their respective containers, as you are already doing for main_mid.php.

Then, on each button click, instead of re-loading the content you simply .hide() one div and .show() the other.

This approach assumes the content does not change while the user is clicking the two buttons.

---

This is how I solve it with help from ilia choly:

var price_page; 
$("#prices").click(function () {
                if(price_page==null){
                    $("#section2").load("prices.php", function(data) {
                        price_page = data;                  
                    }); 
                }

                $("#section2").removeClass();
                $("#section2").addClass("price_mid_area");
                $("#section2").empty();
                $("#section2").html(price_page);

            });

prices is the ID of a button.

Using the .removeClass and .addClass, I can change the css-attributes for the different pages as well.