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.

Survive

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.

Biostatics

Thanks Tim B James. Its working great. One more question, How can i get selected tab index in that context? – Survive

This one didn't help me in the first place because I was reading fast and missed it but found out in a hard way that this answer was correct so giving a nicely earned +1. For the blind ones like myself: search for .tabs('select', term within your code locate them and replace them with .tabs( "option", "active", – Ciborium

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.

Palikar

What is new in this answer – Survive

I wanted to give a more newbie compatible answer eventhough it might not add value for the nerds that knew how to deal with answer 1. I do know what a getter and setter is, but I remember a time when I did not. – Palikar