Programmatically change selected jQuery UI tabs?

Question

So I have a page where I'm just using the stylized part of the tabs. Clicking on a tab will take you to a new page with that tab active, so almost emulating what they should do but not having 4 large pages within one. For each page, I change the active tab by

$( ".tabs" ).tabs({ active:2 });

and so on. This works fine. Now for the dialog. I have a dialog on this page that also initiates tabs. Since there is information that is nested within many divs, the default functionality for 'tabs' will not work. From what I understand, when you click a tab it looks for the next div. 3 tabs = only 3 divs. So in this case, I am just using tabs for stylizing again and just show/hiding the information needed for each different tab (3 tabs total) and unbinding the click.

$('.tabsDialog > ul > li > a').unbind('click');

So, naturally my thought is with the click function to hide the previous div and show the new one would be to activate this new tab. So something like this

         $('a.globalSet').on('click',function(){
              $('div.timeSet').hide();
              $('div.globalSet').fadeIn();
              $('div.comManager').hide();
              $( "li.timeSet" ).tabs({ active:1 });
          });

and this is not activating my new tab. I've tried addClass .ui-tabs-active and still no luck. Any ideas? Thanks in advance. jsfiddle: http://jsfiddle.net/tRKSv/2/

We'll need to see the HTML and a jsFiddle.net example would be very helpful. — j08691
– j08691, Commented Sep 13, 2013 at 13:42

Raúl Juárez · Accepted Answer · 2013-09-13 14:35:52Z

1

Tabs widget, doesn't work exactly as you say, I doesn't look for the "next" div, it looks for a div with the same id you put in href attribute of the a tag in your html (or if it isn't an anchor, a page to load the content from).

So, to make your code work, just put proper href attributes in your a tags. Here is just an example for the dialog, but you should mirror this code for both tabs:

<div id="dialog" title="Basic dialog">
   <div id="dialogTabs">
     <ul>
       <li><a href="#info1">dialog info 1</a></li><!-- 'a' tags with proper href -->
       <li><a href="#info2">dialog info 2</a></li>
       <li><a href="#comManager">dialog info 3</a></li>
       <li><a href="someOtherPage.html">dialog info 3</a></li><!-- ajax loaded content -->
     </ul>
     <div id='info1' class='info1'> <!-- div with corresponding 'id' attribute -->
        <!- More content here ->
     </div>
     <div id='info2' class='info1'>
        <!- More content here ->
     </div>  
     <div id='comManager' class='comManager'>
        <!- More content here ->
     </div>
   </div>
</div>

Here is a fiddle: http://jsfiddle.net/rf90210/tRKSv/3/

answered Sep 13, 2013 at 14:35

Raúl Juárez

2,1591 gold badge19 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

triplethreat77 Over a year ago

Yes, what you have is working. I didn't want to overload with all my information, but I believe it is needed to explain my situation. jsfiddle.net/tRKSv/4

triplethreat77 Over a year ago

Actually. You were right. I usually avoid using ids, as you can only use one per page. But in the case of anchors, you need them. Damn, such a silly oversight. Thanks, fixed.

triplethreat77 Over a year ago

Also, can i redirect the close button to not close, but show an alert? I tried adding close: null under options, but no luck.

Raúl Juárez Over a year ago

You can do that with beforeClose event: api.jqueryui.com/dialog/#event-beforeClose

Collectives™ on Stack Overflow

Programmatically change selected jQuery UI tabs?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related