Using appendTo and Load in click function

Question

jQuery newb and first poster. Please be gentle :-) I've searched and can't find an answer, but I'm sure there's a really simple solution.

Hoping someone can help me. Here's what I'm trying to achieve: I have a row of tabs, with all but the first tab using a click function to load() the external page into the required div. The first tab will have its content loaded by default, not from an external file but from a div already on the page, but further down the code for SEO reasons.

Clicking any other tab loads the content from the external page into the div but if you then want to go back to tab 1, the content is unavailable as it's been replaced by content from the load() - ie no longer in the DOM.

I suppose I could appendTo a #temp div before calling the load() and then append back if tab 1 link is clicked, but there must be a more elegant solution?

Here's code so far:

$(document).ready(function(){

    // default tab1 content div appended to containing div OK
    $("#innerDiv1").appendTo("#outerDiv");

    // tab2 link loads page2.html OK
    $("#link2").click(function(){
        $("#outerDiv").load("page2.html");
    });

    // This doesn't work as it's no longer in the DOM after #link2 clicked.
    $("#link1").click(function(){
        $("#innerDiv1").appendTo("#outerDiv");
    });

});

Any thoughts and replies greatly appreciated.

Thanks in advance M

as nice as im sure it looks ... its not very bookmark friendly - it basically means that users can only ever bookmark the first page .... — Manse, Mar 06 '12 at 17:21

score 2 · Answer 1 · answered Mar 06 '12 at 17:16

The majority of tabs systems have a separate content container for each tab. Clicking a tab hides the visible content and displays the hidden content associated with the current tab clicked. It sounds like all you are doing is wiping out the html each time which makes for a lot more coding effort.

The more robust tab systems like jQuerUI have integrated ajax options to streamline a lot of what you are needing. Since you say you are new at this... it would be well worth using solutions that also provide excellent support, such as jQueryUI

http://jqueryui.com/demos/tabs/

score 1 · Answer 2 · answered Mar 06 '12 at 17:16

1

You could try the jQuery tabs widget: http://jqueryui.com/demos/tabs/

It should make creating a tabbed interface easier for you, and you can just include all the content all at once or load via AJAX, it's a flexable widget.

answered Mar 06 '12 at 17:16

kitti

14,663
31
49

score 0 · Answer 3 · answered Mar 06 '12 at 17:15

0

I would store the contents of each #outerDiv for each tab somewhere. You could use jQuery's data method. Or you create an .outerDiv for each tab, load the contents the first time and then only show the .outerDiv of the active tab and hide the rest.

answered Mar 06 '12 at 17:15

T. Junghans

11,385
7
52
75

score 0 · Accepted Answer · answered Mar 06 '12 at 17:16

0

Change the #link1 click handler to this :

$("#link1").click(function() {
   $("#outerDiv").load('originalurl.html #innerDiv1');
});

this uses AJAX to load the initial page but only grabs the '#innerDiv1' section and the replaces the contents of #outerdiv with it. You will need to replace the originalurl.html with your actual URL ... could maybe use location.href unless you update that for bookmarking ?

answered Mar 06 '12 at 17:16

Manse

37,765
10
83
108

Thanks Manse, just what I was looking for. – Marcus Mar 06 '12 at 17:48

Using appendTo and Load in click function

4 Answers4