Usage of tabs and ID on s
SCENARIO:
i have a software that, on menu selection, fires up a dialog box and load its content via AJAX. Within the context, there always is a TABS element that has always two tabs (edit, and preview).
The tabs element is generated server-side using a smarty template and is the following:
- <div class="tabber">
<ul>
<li><a href="#edit_form">{$caption}</a></li>
<li><a href="#edit_preview">Submit form to get a preview...</a></li>
</ul>
<div id="edit_form">
.. . here goes all the code (which differs from each call....
</div>
<div id="edit_preview">
Form needs to be submitted first to see preview!
</div>
</div>
Then on the client side i create a new dialog, open it, load this content via AJAX. On the returned code i call everytime the $(div.tabber).tabs()...
PROBLEM:
Everything works great the first time i load the dialog. Then i close the dialog, and reopen it... this time, even if i call the tabs() methos, the tabs element is not created and i am left with both tabs visible and no error or warning whatsoever.
Since i can verify this error also when opening TWO dialogs at the same time (to edit/preview two different parts of the site) i think its related to the use of the IDs which are actualy re-used over time.
Previously i used a similar tabs element but that did not relied on IDs... and it worked great. But in order to reduce code to be maintained, i switched to jqueryui tabs and fould this rpetty annoying thing.
What could i do to fix this? This is VERY important!