jquery-ui-tabs content interferance

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开发者_如何学C . 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...

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

It's not a recommended practice to have the same id in the same page, but you should not have problems with it at all, all you need to do in your javascript calls is append the tab it self, for example:

$(".tab-1 #div1")... instead of only $("#div1")...

though, I would always avoid having the same id and "tell" your generator to use div1-random-number and always use the class to get the widget using the currently tab as seen in the code above

Live example on JsBin