The same id in jQuery bookmarks

Question

I am using jQuery tab library in a small application. There are 5 tabs per page, and the content for each page is loaded using Ajax. The problem is that after loading the tab, it remains in the memory of browsers (and also makes its HTML elements). Therefore, if I use, let the DIV element say with the same identifier as the previously loaded tab, all the JS function associated with this identifier tries to interact with the old tab.

In other words, let's say I have a page with two tabs "Traffic Data1", "Traffic Data2". Now first, I click on the Traffic Data1 tab, which makes an ajax call and loads the page just fine. This page has 2 date input fields, for the first field - "dateFrom", and in another field "dateTo". Next to it is the Go button. After pressing the button, the JS function displays a warning window with values ​​in each of the input fields.

Now I click on the "Traffic Data" tab. The content of the page is very different, but it has the same input fields, 2 for dates (with the same identifiers) and Go buttons. When I click the Go button on this page, I see a warning window with the values ​​from the previous tab.

So my question is: is there a way to unload the previous tab? Or is this the only alternative to using elements with unique divs (although the pages are completely separated).

thanks

Answer 1

Since the clicks event overloads your form and assumes that you are using divs to hold the content loaded by ajax, add .click(function () { $(this).children('div').children.remove(); }) in your ad tabs() .

This should remove the contents of the div and any event handlers bound to it.

Answer 2

You cannot have multiple items with the same identifier. When you find an item by identifier, the first one is always returned, because identifiers are expected to be unique.

Leave the name attributes for the input elements the same, but change their identifiers to unique ones.

You can select an element using the name attribute as follows: $('[name="foobar"]')

Update

There is a cache option in the docs for jQuery UI tabs, which when set to false should remove old tabs from the DOM after you leave them:

Is it possible to cache the contents of deleted tabs, for example. download only once or with each click. The contents of the cached content are downloaded, for example, once and only once for the first click. Please note that to prevent actual Ajax requests from caching by the browser, you need to provide additional cache: false for ajaxOptions.

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

Answer 3

Are you looking for jQuery Live .

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

If you use it, jQuery will magically automatically update according to your new elements as they appear / disappear.

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

Answer 4

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

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

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