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
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.