CODEWITHSUNDEEP
javascriptjquerytabs
skiindude22
skiindude22

Reputation: 509

Selecting a tab with jQuery tools

I set up the jQuery Tab tools on my web application, and it's working fine to click between the tabs, but what I would like to do is be able to select a tab after another javascript function completes. I'm having trouble doing this successfully after reading through the documentation and searching.

I have a search function, and when someone searches, I'd like the search tab to be selected and come into view.

At the end of the search function:

var tabby = jQuery('#right-tabs').tabs();
tabby.tabs('select', 1); // switch to second

The HTML:

<div id="right1">
    <ul class="tabs" id="right-tabs"> 
        <li><a href="#" id="articles-tab">Articles</a></li> 
        <li><a href="#" id="search-tab">Search results</a></li> 
    </ul> 
    <div class="panes" id="right-panes">
        <div id="articles-panel"></div>
        <div id="search-results-panel"></div>
    </div>
</div>

I got a firebug error saying "Uncaught TypeError: Cannot read property 'jquery' of undefined".

I also tried another approach... just manually setting/removing the classes, with this:

jQuery("ul#right-tabs a").removeClass('current');
jQuery("ul#right-tabs a#search-tab").addClass('current');
jQuery("div#articles-panel").hide();
jQuery("div#search-results-panel").show();

That works, but it creates a strange behavior, of not letting you click on any other tabs until you click on the selected tab, and then it will let you click the other ones.

So, I'm not exactly sure how to make jQuery tools cooperate with what I want to do. It should be simple, I'm considering bailing on this and just writing it from scratch. But if you guys have a way to make either approach work, or a better way, I would really appreciate it!

UPDATE

All I needed was:

var api = jQuery("ul#right-tabs").data("tabs");
api.click(1);

I was mistakenly finding examples for the jQuery tabs and not the jQuery tools tabs.

Upvotes: 1

Views: 6688

Answers (1)

skiindude22
skiindude22

Reputation: 509

What I needed was:

var api = jQuery("ul#right-tabs").data("tabs");
api.click(1);

I was mistakenly finding examples for the jQuery tabs and not the jQuery tools tabs.

Upvotes: 3

Related Questions