Misma ID en las pestañas de jQuery

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

Muchas Gracias

preguntado el 01 de febrero de 12 a las 22:02

You cannot have duplicate id's. If you change the id's of the second tab I think it will work. -

The "id" attribute gives the identificador for an element. If two elements share an "id" value, then the value is no longer an identifier. Use the "class" attribute when you need to tag multiple elements with the same categorizing label. -

I figured it out with some help from Pete. The correct event to bind the remove function to is $( "#tabId" ).bind( "tabsload", function(event, ui) { $('#tabId .ui-tabs-hide').children().remove(); });. This bind removes the content from the previously loaded tabs and they disappear from the source. -

Because I was stuck at this for around 15 minutes: The space between #tabId and .ui-tabs-hide is not optional ! -

4 Respuestas

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.

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

You can select an element by its name atributo como este: $('[name="foobar"]')


In the docs for jQuery UI Tabs there is an option called cache que cuando se establece en 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.

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

Respondido el 20 de junio de 20 a las 12:06

Estás buscando jQuery en vivo.

Descripción Adjunte un controlador de eventos para todos los elementos que coincidan con el selector actual, ahora y en el futuro.

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!"); }); 

Respondido 02 Feb 12, 02:02

Well with the current release of jQuery it's actually .en(). - Puntiagudo

.delegate() ha sido preferido sobre .live() desde jQuery 1.4. $(document).delegate(<selector>, <event>, <event handler>) es el mismo que $(<selector).live(<event>, <event handler>);. - Jaspe

@Jasper, thks for the update. Haven't played with jQuery in a while. - Frankie

@Pointy, and immediately after reading about delegate here comes on. Perfect! ;) Thks. - Frankie

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(); }) para usted tabs() declaración.

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

Respondido 02 Feb 12, 02:02

This was actually good inspiration for me to do some extra research. The correct event to bind the remove function to is $( "#tabId" ).bind( "tabsload", function(event, ui) { $('#tabId .ui-tabs-hide').children().remove(); });. This bind removes the content from the previously loaded tabs and they disappear from the source. - Rohit Chopra

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.

Respondido 02 Feb 12, 02:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.