Rohit Chopra
Rohit Chopra

Reputation: 2811

Same IDs in jQuery Tabs

I am using the jQuery Tabs library in a small application. The page has 5 tabs and the content for each page is loaded using Ajax. The problem is, once I load a tab, it remains in the browsers memory (and so do its HTML elements). So if I use lets say a DIV element with the same ID as a previously loaded tab, all JS function related to that ID try to interact with the old tab.

IN other words, lets say I have a page with 2 tabs, "Traffic Data1", "Traffic Data2". Now first, I click on the Traffic Data1 tab which makes the ajax call and loads the page just fine. This page, has 2 date input fields, ID for the first field is "dateFrom" and the other field is "dateTo". Next to that is a "Go" button. Upon clicking the button, a JS function shows an alert box with the values in each of the input fields.

Now, I click on the "Traffic Data2" tab. The contents of the page are very different, but it has the identical input fields, 2 for dates (with same IDs) and Go Button. When I press the Go button on this page, I see the alert box with values form the previous tab.

So my question is, Is there a way to unload the previous tab? Or is the only alternative to use elements with unique divs (even though the pages are complete separate).

Thanks

Upvotes: 4

Views: 4372

Answers (4)

pete
pete

Reputation: 25081

Since the tabs click event reloads your form and assuming you're using divs to contain the ajax-loaded content, add .click(function () { $(this).children('div').children.remove(); }) to your tabs() declaration.

That should remove the div content and any event handlers that are bound to it.

Upvotes: 1

mothmonsterman
mothmonsterman

Reputation: 2481

If you can pass a context to the jquery functions, you could make your calls relative to currently selected tab...

$("#someDuplicatedId", activeTab).doStuff();

Or if caching the content is not important, go with Jasper's answer.

Upvotes: 1

Frankie
Frankie

Reputation: 25165

You are looking for jQuery Live.

Description: Attach an event handler for all elements which match the current selector, now and in the future.

If you use it jQuery will magically auto-update to match your new elements as they appear/disapear.

// code sample
$("a.offsite").live("click", function(){ alert("Goodbye!"); }); 

Upvotes: 2

Jasper
Jasper

Reputation: 75993

You cannot have multiple element with the same ID. When you find an element by ID the first one found is always returned because it is expected that IDs will be unique.

Leave the name attributes for the input elements the same but change their IDs to be unique.

You can select an element by its name attribute like this: $('[name="foobar"]')

Update

In the docs for jQuery UI Tabs there is an option called cache that when set to false should remove the old tabs from the DOM after you navigate away from them:

Whether or not to cache remote tabs content, e.g. load only once or with every click. Cached content is being lazy loaded, e.g once and only once for the first click. Note that to prevent the actual Ajax requests from being cached by the browser you need to provide an extra cache: false flag to ajaxOptions.

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

Upvotes: 3

Related Questions