CODEWITHSUNDEEP
jqueryajaxloadappendto
Marcus
Marcus

Reputation: 43

Using appendTo and Load in click function

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

Upvotes: 4

Views: 547

Answers (4)

Manse
Manse

Reputation: 38147

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 ?

Upvotes: 0

kitti
kitti

Reputation: 14794

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.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

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/

Upvotes: 2

T. Junghans
T. Junghans

Reputation: 11683

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.

Upvotes: 0

Related Questions