Question

I create tabs with jQuery :

HTML:

<div id="tabs">

    <ul id="tab">
           <li>
             <a href="#t1">Tab 1</a>
           </li>
           <li>
             <a href="#t2">Tab 2</a>
           </li>
    </ul>

    <div id="tab-contents">
      <div id="t1">aaaaaaaaaa</div>
      <div id="t2">bbbbbbbbbb</div>
    </div>

</div>

JS:

$("#tabs").tabs()

I empty my tab as

var tab = $("#tab").html()
var tabCont = $("#tab-contents").html()
$("#tab").empty()
$("#tab-contents").empty()

and try to repaint it:

$("#tab").html(tab )
$("#tab-contents").html(tabCont )
$("#tabs").tabs()

it creates tab’s elements but dont show them

what’s problem?

Answer 1

jQueryUI adds a whole mess of data to the tags when it creates a UI component. My guess is that it is tripping up on the previous UI data and not re-creating it correctly. To fix it destroy the old tab data when you repaint like so:

$("#tabs").tabs( "destroy" );
$("#tab").html(tab )
$("#tab-contents").html(tabCont )
$("#tabs").tabs()