jQuery UI tabs - Add new tab inline

Hi all,

I am having an issue with jQuery UI tabs. I’m using the append() function to add a new tab to the list inline (with a click of a button), plus the associated hidden div container. I make sure the new inline tab and div contain all the required jquery classes to funcion.

If I select the tabs and click to view source, all looks just perfect, if I copy the source code into a new html document and run it in the browser, it works well, however the new inline tab doesn’t work when clicked in the original document.

Is there something I am missing here, anyone familiar with jQuery around to tell why jQuery ignores the extra tab, please?

Thanks a lot!

Because you are adding it manually, the script has no ability to update its knowledge about the new tab.

Why don’t you consider using the add method instead, to add a new tab?

Thanks Paul,

I overlooked the add() method, did a test and yes it works for adding a new tab, however I also need the associated div to be prepopulated with data which this method doesn’t seem to be capable to handle.

Isn’t that what the second parameter is for?

The second argument is either a URL consisting of a fragment identifier only to create an in-page tab or a full url (relative or absolute, no cross-domain support) to turn the new tab into an Ajax (remote) tab.

If the content is already available, ensure that it is hidden and has a unique identifier, and use that as a fragment identifier (#someId) when adding the tab.