Question

I might be making this more difficult than I need to but I am in some need of assistance. I have some jquery ui tabs which are added via the add functionality. these tabs are via ajax.

I have a tabTemplate set as follows on the initial addition of the tabs.

tabTemplate: "<li><a href='#{href}'>#{label},/a><li>"

And the add tab functionality is done via

$tabs.tabs('add', 'http://thanksforyourhelp/greatly/appreciated/, some_title_var)

If a form is submitted on that tab, data is written to the database. The response gives an ID of the row added to the database.

Next time that specific tab is visited the link should actually be ‘http://thanksforyourhelp/greatly/appreciated/ID’ where the ID is now known since the response from the form (ajax here as well) sent it back. This will pre-populate the forms on the page based off the data in the database for “ID.”

I’ve looked at the example here, but my href is an id for the tab in question (and not a url). Where is the actual url stored?

The tab looks like this.

<a href="#ui-tabs-6">new</a>

I have tried changing the href on that, but upon clicking the tab the content is loaded without ajax instead of within the tab as desired. What might I be doing wrong here? Thanks for your help.

Edit: removed edits with references of no longer existent urls.

Answer 1

I haven’t worked with AJAX-powered tabs too much, but I think you want the url method:

$("#tabs").tabs("url", index, url)

Change the url from which an Ajax
(remote) tab will be loaded. The
specified URL will be used for
subsequent loads. Note that you can
not only change the URL for an
existing remote tab with this method,
but also turn an in-page tab into a
remote tab.