I'm trying to add new tab (runtime). The addTab function:
function addTab(name,url,ctx) {
var tabs = $("#tabs");
tabs.find( ".ui-tabs-nav" ).append('<li><a href="tab-struktura.html">Nazwa</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>');
tabs.tabs("refresh");
}
The original code for tabs is:
<div id="tabs" class="tabs-bottom" style="background:url(/images/bg_document.png) top center no-repeat;">
<ul>
{foreach from=$master_structure item=item}
<li><a href="tab_index.html?ctx={$item->id_jed}">{$item->nazwa}</a></li>
<li><a href="tab_index.html?ctx={$item->id_jed}">{$item->nazwa}</a></li>
{/foreach}
</ul>
<div class="tabs-spacer" style="height:0px"></div>
</div>
(the params are not used, because i reduced code to sure values)
I'm very surprised, when I saw new second tab bar with totally new tabs.
It looks like all < li > tags are transformed to tabs.... (those from tab_index.html)
Is it a bug or i have to mark somehow other li tags to be ignored by refresh?
edited: Now I know, that there is no problem with more < li> - in testing enviroment it works, so the problem has to be somewhere else... but still don't know where...
the source on jsFiddle: http://jsfiddle.net/Sledgehammer/hCdRy/, tab_index.html is:
<ul class="box-menu main-menu">
<li class="active"><a href="deny.html">e-sklep</a></li>
</ul>
<table class="panel-table">
<tr>
<td><span style="cursor:pointer" onclick="$.addTab();">PRESS HERE TO ADD TAB</span></td>
</tr>
</table>
It was a bug! As you can see here: