jQuery UI tabs panelTemplate option deprecated -

so upgraded jquery ui 1.8 1.10. tabs seem have been refactored in 1.9 according this: http://jqueryui.com/upgrade-guide/1.9

while reading through - came up:

deprecated idprefix, tabtemplate, , paneltemplate options; use refresh method

as mentioned above, add , remove methods have been deprecated. result, idprefix, tabtemplate, , paneltemplate options have been deprecated well. should replace uses of idprefix, tabtemplate, , paneltemplate options markup use.

not clear you should replace uses... markup 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 provide example of how upgrade - appreciated.

jquery ui 1.8 had add , remove methods (and associated events) served purpose of dynamically removing or adding tabs widget.

from legacy 1.8 documentation tabs:

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

  ---

• remove( index )
  remove tab.

2 methods used following options:

paneltemplate type: string

---

default: ""
html template new tab panel created in case of adding tab add() method or when creating panel remote tab on fly.

tabtemplate type: string

---

[see doc]

idprefix type: string

---

[see doc]

as can see paneltemplate html template panel created using add method.

all of deprecated - current method of adding or removing tabs dynamically assistance of new refresh method:

refresh()

---

process tabs added or removed directly in dom , recompute height of tab panels. results depend on content , heightstyle option.
method not accept arguments.

upgrade guide states, need remove add , remove method calls in script, replacing them code directly manipulates dom, , calling refresh().
additionally, need discard set options of idprefix, tabtemplate, , paneltemplate.

as code suggests, somewhere down line using add method, example:

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

with new tabs api, should similar (taking account 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) , refresh widget */ $("#main-xxx-tabs")    .append("<div id="newtabid1" class='main-xxx-tabs-content'>new tab content</div>");    .tabs("refresh"); 

this create new tab. can replace value of href same aria-controls \ id if not need remote loading (ajax) tab.

finally, upgrade guide gives example of how remove tab new api.

edit:

---

in case using paneltemplate template primary (first) tabs, opposed dynamically creating them, same rules apply; have directly add appropriate html. if html before 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 should along 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 original paneltemplate vv -->    <div id="tabs-1" class="main-xxx-tabs-content">       <p>your preloaded content here.</p>    </div> </div> 

and further clarify, panel content div tab.
ajax-loaded tabs, not need create panel - automatically created you.

so effectively, things going again, have remove paneltemplate option.
here jsfiddle demonstrating ajax-loaded, preloaded tabs: http://jsfiddle.net/losnir/lwmvv/
see jquery ui tabs documentation.