CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
frumbert
frumbert

Reputation: 2427

jqueryui tabs (1.9.1) activate on load

I have code like this:

var enTabs = {
  "Layout": 0,
  "Edit": 1,
  "Stuff": 2
}

$("#tabs").tabs({
    activate: function (event, ui) {
        switch (ui.newTab.index()) {
            case enTabs.Layout:
             // loads remote data, processes it, draws it to this tab;
            break;

            case enTabs.Edit:
             // loads remote data, processes it, draws it to this tab;
            break;

            case enTabs.Stuff:
             // loads remote data, processes it, draws it to this tab;
            break;

        }
    }
}).tabs("option","disabled",[enTabs.Edit,enTabs.Stuff]);
console.log("active tab", $("#tabs").tabs("option","active")); // says "0"

As per the jQuery "by design" statement (http://bugs.jqueryui.com/ticket/8735), the activate event isn't handled when the tab is first drawn; OR when you set .tabs("option","active",enTabs.Layout) since activate won't fire if the current index matches the option/active that you set, and it's initialised to zero.

What is the best way to ensure that when first drawing the tabs, that 'activate' is fired for the first (0th) tab, realising that I don't want to bind to 'create' since I don't want to load data on tabs until they are actually clicked ?

I haven't been able to make

$("#tabs").tabs( "option", "active", -1 ).tabs( "option", "active", enTabs.Layout)

work consistently.

Upvotes: 1

Views: 1943

Answers (2)

Daweb
Daweb

Reputation: 84

This is a way to trigger the activate function on page load:

$('#tabs')
    .tabs({
        active: false,
        collapsible: true,
        activate: function(){console.log('Tab activated');}
    })
    .tabs('option', 'active', 0)
    .tabs('option', 'collapsible', false);

Explaination:

JQuery tabs are initialized with options

  • collapsible:true // needed to use option active:false
  • active:false // means no tab visible (all collapsed)

Then, we immediately active the tab we want to see on pageload

  • .tabs('option', 'active', 0) // Here tab 0 is activated, but could be other one

And finally we remove the collapsible option (if you don't want it...)

  • .tabs('option', 'collapsible', false)

Upvotes: 0

user2546311
user2546311

Reputation: 31

you can use something like this

function loadTab(index) {
   switch (index) {
        case enTabs.Layout:
         // loads remote data, processes it, draws it to this tab;
        break;

        case enTabs.Edit:
         // loads remote data, processes it, draws it to this tab;
        break;

        case enTabs.Stuff:
         // loads remote data, processes it, draws it to this tab;
        break;

    } 
}
 $(function () {
      $("#tabs").tabs({
          create: function (event, ui) { loadTab(ui.tab.index()) },
          activate: function (event, ui) { loadTab(ui.newTab.index()) }
      });
 });

there is a similar question here JQuery UI tabs 1.10.0 activate is not called after creation

Upvotes: 3

Related Questions