Microsoft JScript runtime error: no such method 'select' for tabs widget instance

Question

I need select specific tab functionality for the jquery tabs on clicking on the html buttons. I am using jquery.1.9.1.js and jquery-ui-1.10.2.custom.js file. I have implemented below code but does not work for me.

<script language="javascript" type="text/javascript">
 $("#ui-tabs").tabs();
 function SelectTab() { // bind click event to link
                 $('#ui-tabs').tabs('select', 2); // switch to third tab
                 return false;
             }
 </script>
<div id="ui-tabs">
<ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">Tab1 content </div>
<div id="tabs-2">Tab2 content </div>
<div id="tabs-3">Tab3 content </div>
</div><a id="next" class="button-style" href="#" onclick="return SelectTab();">Select Tab</a>

The problem is statement $('#ui-tabs').tabs('select', 2); in function SelectTab gives me error Microsoft JScript runtime error: no such method 'select' for tabs widget instance. Normal selection of tabs on clicking on them working fine. But it is not working when done from function call. Whats going wrong in the implementation or is there any file missing? please suggest.

Answer 1

There is no select method for jQuery UI Tabs in this version. To get your functionality to work you need to change your code to;

$('#ui-tabs').tabs( "option", "active", 2 );

Please read http://api.jqueryui.com/tabs/#option-active for more information on this.

// getter
var active = $( ".selector" ).tabs( "option", "active" );

// setter
$( ".selector" ).tabs( "option", "active", 1 );

Check out this little jsFiddle for an example of it working.

Answer 2

If you want to make indiviual links to open tabs on your site you can use the function below and call it with

<div onclick="changeToTab(targetTabNumber)"> mylinkText </div>

function changeToTab(ID){
    var $tabs = $('#tabs').tabs();
    $tabs.tabs( "option", "active", ID );
    return false;
}

First target is adressed with 0, second with 1 and so on. The div can be anything that allows onclick of course.