jQuery UI tabs panelTemplate option deprecated

Question

So I upgraded jquery ui from 1.8 to 1.10. Tabs seem to have been refactored in 1.9 already according to this: http://jqueryui.com/upgrade-guide/1.9

While reading through - this came up:

Deprecated idPrefix, tabTemplate, and panelTemplate options; use refresh method

As mentioned above, the add and remove methods have been deprecated. As a result, the idPrefix, tabTemplate, and panelTemplate options have been deprecated as well. You should replace all uses of the idPrefix, tabTemplate, and panelTemplate options with the markup you would like to use.

Not very clear what You should replace all uses... with the markup you would like to use means.

HTML

<div id="main-xxx-tabs">
<ul>
<li><a href="link1.php">link1</a></li>
<li><a href="link2.php">link2</a></li>
</ul>
</div>

JS

jQuery("#main-xxx-tabs").tabs({
  panelTemplate: "<div class='main-xxx-tabs-content'></div>"
})

If anyone could provide an example of how to upgrade this properly - would be much appreciated.

Answer 1

jQuery UI 1.8 had the add and remove methods (and associated events) which served the purpose of dynamically removing or adding tabs to your widget.

From the legacy 1.8 documentation for tabs:

• add( url, label [, index ] )
  Add a tab.

  ---

• remove( index )
  Remove a tab.

The two methods used the following options:

panelTemplate Type: String

---

Default: ""
HTML template from which a new tab panel is created in case of adding a tab with the add() method or when creating a panel for a remote tab on the fly.

tabTemplate Type: String

---

[see doc]

idPrefix Type: String

---

[see doc]

As you can see panelTemplate is the HTML template which the panel is created from using the add method.

All of this is now deprecated - the current method of adding or removing tabs dynamically is with the assistance of the new refresh method:

refresh()

---

Process any tabs that were added or removed directly in the DOM and recompute the height of the tab panels. Results depend on the content and the heightStyle option.
This method does not accept any arguments.

As the upgrade guide states, you need to remove all add and remove method calls in your script, replacing them with code that directly manipulates the DOM, and then calling refresh().
Additionally, you need to discard any set options of idPrefix, tabTemplate, and panelTemplate.

As your code suggests, somewhere down the line you are using the add method, for example:

$("#main-xxx-tabs").tabs("add", "/remote/tab.html", "New Tab");

With the new tabs API, you should do something similar to (taking into account your current panelTemplate value):

/* Add tab */
$("#main-xxx-tabs .ui-tabs-nav")
   .append("<li aria-controls='newTabID1'><a href='/remote/tab.html'>New Tab</a></li>")

/* Add respective tab panel (content) and refresh widget */
$("#main-xxx-tabs")
   .append("<div id="newTabID1" class='main-xxx-tabs-content'>New Tab Content</div>");
   .tabs("refresh");

This would create a new tab. You can replace the value of href to be the same as aria-controls \ id if you do not need a remote loading (ajax) tab.

Finally, the upgrade guide also gives you an example of how to remove a tab with the new API.

Edit:

---

In case you were just using panelTemplate as a template for your primary (first) tabs, as opposed to dynamically creating them, then the same rules apply; you will have to directly add the appropriate html. If your html before the upgrade was:

<div id="main-xxx-tabs">
<ul>
<li><a href="link1.php">link1</a></li>
<li><a href="link2.php">link2</a></li>
</ul>
</div>

Then you should do something along the lines of:

<div id="main-xxx-tabs">
   <ul>
      <li><a href="#tabs-1">Preloaded</a></li>
      <li><a href="link1.php">link1</a></li>
      <li><a href="link2.php">link2</a></li>
   </ul>
   <!-- vv Constructed from your original panelTemplate vv -->
   <div id="tabs-1" class="main-xxx-tabs-content">
      <p>Your preloaded content here.</p>
   </div>
</div>

And to further clarify, a panel is the content div for your tab.
For ajax-loaded tabs, you do not need to create a panel - it will be automatically created for you.

So effectively, to get things going again, you just have to remove the panelTemplate option.
Here is a JSFiddle demonstrating ajax-loaded, as well as preloaded tabs: http://jsfiddle.net/losnir/LWmVv/
See also the jQuery UI Tabs Documentation.