no such method 'add' for tabs widget instance

Question

I am using the jqueryui tab widget. I am trying to add tabs dynamically. I get the following error while try to call $('#id').tabs('add',...): "no such method 'add' for tabs widget instance"

I am using ASP.NET MVC.4 - Razor - This is in a partial view. The layout for the container view includes the correct jquery bundle inclusion:

@Scripts.Render("~/bundles/jqueryui")

I am using jquery v2.0.0 & jquery v1.10.2.

Here is some code that is called during initialization:

$('#tSheet').tabs();
$('#tSheet').tabs("add", '', 'Tab test one');
$('#tSheet').tabs("add", '', 'Tab test two');

and the html:

<div id="tSheet">
    <ul>
    </ul>
</div>

Have any ideas as to why I am getting this error? Thank you, Jim

After learning that jquery-u1 1.10.2 drops the add method - I replace that code with the following: Thank you Kevin,

Adding replacing the add with the following the calling refresh causes an different error.

$('#tSheet > ul').append('<li><a href="#general">General</a></li>');
$('#tSheet').append('<div id="#general">Some text</div>');

$('#tSheet').tabs('refresh');

This causes an exception when I click on the tab.

Answer 1

There are no add method on jquery ui now. You can read documentation here.

But you can solve your problem by adding html to your content for example with jquery .append() function. And then create tabs:

$('#tSheet').tabs();

Here you can look for example how should html looks.

Nice jsFiddle example of adding new elements.