Setting the active tab of an extended jQuery tab widget from within the widget

Question

I've seen several examples of how to set the active tab programmatically from outside of the widget. However, I've extended the tab widget and cannot seem to set the active tab programmatically from within the widget. I've created a small test case to demonstrate.

Javascript:

$(document).ready(function(){
    $.widget( "custom.extendedTabs", $.ui.tabs, {
        _create: function() {
            var self=this;
            this.element.mouseover(function(){
                console.log(self.options.active);
                self.options.active=3;
                console.log(self.options.active);
            });
            return this._super();
        }
    });

    $(".tabs").each(function(){
        $(this).extendedTabs("option","active",1);
    });
});

HTML:

<div id="tabs1" class="tabs">
  <ul>
    <li><a href="#tabs1_1">HEY1!</a></li>
    <li><a href="#tabs1_2">HEY2!</a></li>
    <li><a href="#tabs1_3">HEY3!</a></li>
    <li><a href="#tabs1_4">HEY4!</a></li>
  </ul>
  <div id="tabs1_1">
    <p>Content 1</p>
  </div>
  <div id="tabs1_2">
    <p>Content 2</p>
  </div>
  <div id="tabs1_3">
    <p>Content 3</p>
  </div>
  <div id="tabs1_4">
    <p>Content 4</p>
  </div>
</div>

Goal:

To automatically set the active tab to the 4th one (index 3) on mouseover of the tab widget.

Problem:

In this demo, the "active" option is successfully being set right after initialization (to index 1) and the focus jumps to the 2nd tab as expected. However, on mouseover, even though the active option is being set successfully to 3 (as verified by the logging), the tab does NOT jump to the 4th tab as expected.

I've found a workaround by simply using the click() method of the tab that I want selected. However, that shouldn't be required -- this functionality should work directly within the widget. I'm just missing something. Other options work just fine within the widget. For example, I could call self.options.collapsible=true within the mouseover and it will affect the change as expected.

Any ideas?

Answer 1

Found the solution!

You can call _setOptions() from within the extended widget.

For me, the specific code is:

this._setOption("active",this.element.find(">ul>li").length-1);

But, in general, the solution is:

this._setOption("active", <zero-based index of tab to activate>);