hello,

according to the documentation, it should be possible to add a new ajax tab programmatically using the 'add' method.

http://jqueryui.com/demos/tabs/#method-add
The second argument is either a URL consisting of a fragment identifier only to create an in-page tab or a full url (relative or absolute, no cross-domain support) to turn the new tab into an Ajax (remote) tab.

however, when i try this, the newly created tab's href value is '#ui-tabs-[object Object]', not the url I set as a parameter. and instead of one, two tab containers were created, both with 'ui-tabs-[object Object]' as id value. it seems no url's are accepted as second parameter, only fragment identifiers.

i think the cause of this conflict is the lack of a title parameter. the documentation clearly states tabs need a title attribute that corresponds with its container (http://jqueryui.com/demos/tabs/#Ajax_mode).

here's the code I have used:

1. $(function () {
2.     var tabs;
3.    
4.     tabs = $("#tabs").tabs();
5.    
6.     // works
7.     //$("#tabs").tabs('add', '#data3', 'AJAX TAB 3');
8.    
9.     // does not work
10.     // $("#tabs").tabs('add', 'data3.html', 'AJAX TAB 3');
11. });

and the html for this javascript:

1. <div id="tabs">
       <ul>
           <li><a href="data1.html" title="data1">AJAX TAB 1</a></li>
           <li><a href="data2.html" title="data2">AJAX TAB 2</a></li>
       </ul>
       <div id="data1">
       </div>
       <div id="data2">
       </div>
   </div>
   
   
   
   
   
   
   
   
   

has anyone encountered simlar problems? and is there a solution to this?

thanks,
maarten

EDIT: right after I posted this question, I discovered what caused my conflict, thanks to @rwhitbeck:

jQuery UI 1.7.2 is not supported with jQuery 1.4.x.  You need to use jQuery 1.3.2

jQuery UI 1.8 will support jQuery 1.4.2

so the solution for now is to downgrade to jquery 1.3.2.