Question

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" /></button>
  </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!

Answer 1

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");
    }
});