Adding new tab with jQuery UI Tabs

Adding new tab with jQuery UI Tabs

Hi,

I need to add programatically a new tab, i'm trying with the code below:

 function loadMail(idMsg, senderId) {
       $("#abasCorreio").tabs( 'remove' , 3 );
       $("#abasCorreio").tabs("add","#tab-4","Mensagem");
       $("#abasCorreio").tabs("select","#tab-4");
        $("#tab-4").load('loadmail.jsp?idMsg='+idMsg+'&senderId='+senderId);      
}   


It's working, a new tab is added, but because of layout specification i have this html structure:

<div id="abasCorreio">
    <ul> [ ...] </ul>
    <div id="wholeContainter">
           <div id="tab-1"> [ ...]      < /div>
           <div id="tab-2"> [ ...]      < /div>
            <div id="tab-3"> [ ...]      < /div>
            <div id="tab-4">  NEW TAB CONTENT SHOULD BE HERE    < /div>
    </div>

My problem is that this fragment:
$("#abasCorreio").tabs("add","#tab-4","Mensagem");

Is actually adding a new tab inside #abasCorreio and not inside #abasCorreio -> #wholeContainter. How can i specify that the new tab should be included inside this div#wholeContainter ?


Thanks,
Carlos
http://carvalhar.com