jQuery UI tabs - Add new tab inline

JavaScript
1

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!

2

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?

3

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.

4

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.