Error de jQuery UI Tabs: las pestañas se mezclan entre sí

I have tabs in my page (Tabs in Tabs) and when I change the tab from parent part (for example I get from first tab to second tab and then return to first tab) the contents of children tabs of the first tab get mixed, have you seen this bug?, is there a way to fix it? thanks

(the contents are being load via Ajax)

tabs at first : looks fine and not mixed enter image description here

tabs getting mixed : (all three tabs are shown in one tab)

enter image description here

preguntado el 22 de mayo de 12 a las 20:05

Don't you have to re-initialize the child tabs if content is loaded using ajax ? Anyway, you'd better make a jsFiddle to reproduce your problem -

1 Respuestas

I was able to reproduce a similar problem. The issue occurs when you have non-unique tab ids.

Aquí hay un jsfiddle que ilustra el problema:
(Look at tab 3. Inner tab C will show even though A is selected)

http://jsfiddle.net/gizmovation/JJnJF/

To fix the problem, change your inner tabs to have ids that are different than the outter tabs.

Here is a fixed jsfiddle:
(Look at tab 3. Inner tab A will show properly)

http://jsfiddle.net/gizmovation/EqyPM/

If that doesn't fix your issue, it could be related to the jquery ui tabs not being bound to the newly loaded ajax content. You can try re-binding $(selector).tabs() after the content is loaded to see if that works.

Espero que esta información ayude!

contestado el 25 de mayo de 12 a las 17:05

Thanks, it worked. as you said the problem were with non unique Ids, I'll give your bounty in 18 hours, :) - ePezhman

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