Search code examples
jqueryjquery-uijquery-ui-tabs

jquery tab how to set default tab by tabname using select:


What is the jquery ui Tab syntax to select: tabname (not index).. This works standalone but I would like to combine it with the other .tabs section:

$("#Maintabs").tabs("select", "#Maintabs-1");  // set default tab 

I would like to include it in my existing .tabs section but don't know the syntax:

$('#Maintabs').tabs({
    selected: 1, // this is where I would like set by tabname NOT index

    select: function (event, ui) {
        var url = $.data(ui.tab, 'load.tabs');
        location.href = url;
            return false;
        }
    }
});

Solution

  • Well no one responded and in the mean-time, I was motivated to discover one since Firebug showed an error under certain conditions and deployment is just around the corner.
    The goal was to set the default tab to Item (edit) which in most cases is the second tab unless they do not have permissions to insert an new item and only have rights to edit an existing item.

    Because some users do not have rights to create a new item and only edit an existing item, the new item tab is set to hide in Asp.net. Normally, this would be the first tab but since it is not because of rights, only the second tab is visible which made using explicit numbers for setting the tab not doable. So, what was done was prior to creating the tab, a check was done to see if the NewItem tab existed and based on this set the default tab as shown below.

    var intMainTabDef = 1;
    if ($('#hlnkNewItem').length > 0) {
        intMainTabDef = 1;
    } else {
        intMainTabDef = 0;
    }
    
    $('#Maintabs').tabs({
        create: function (event, ui) {
         selected: intMainTabDef
        }
    });