jquery-ui-tabs content interferance

Question

I am using jquery-ui-tabs to allow users to create their own tabs, then ofcourse switch between tabs as they see fit. The content in the widgets are small widgets which are like mini programs in their own right. Users can then choose which widgets they want on any given tab.

This works fine as long as any given widget is only set in 1 tab, however, things start going wrong when any given widget is added to 2 tabs or more. When the widgets are generated, they use the id from the database. For example . If a given widget is added to 2 or more tabs, they end up with 2 divs with the id same id, for example widget_1, which causes problems as you can imagine.

So my question is, what is the best way to solve such a problem?

I wish I knew earlier that they wanted to be able to use the same widget on more than 1 tab. I get the feeling this is almost going to have to be a complete rewrite...

Answer 1

does the "div called div1" have "div1" as class or id?

your question sounds like it's an id, and thats all the problem: the id has to be unique

to solve this, work with classes - they can be used multiple times and you should be able to do the exact same things (but thats a bit hard to say without seeing some code).

EDIT: changed my fist link to show the w3c-recommendation. i linked this article before