when opening new tabs, it should open the new tab diretly in jquery ui tabs

I am using jquery-UI for creating dynamic Tab panel.when i click on add Tab button, the new tab is get creating. but that tab panel is not opening directly. when click on that tab panel then only it is opening.

 $(function() {
var tabTitle = $( "#tab_title" ),
  tabContent = $( "#tab_content" ),
  tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
  tabCounter = 2;

var tabs = $( "#tabs" ).tabs();

// modal dialog init: custom buttons and a "close" callback resetting the form inside
var dialog = $( "#dialog" ).dialog({
  autoOpen: false,
  modal: true,
  buttons: {
    Add: function() {
      addTab();
      $( this ).dialog( "close" );
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  },
  close: function() {
    form[ 0 ].reset();
  }
});

// addTab form: calls addTab function on submit and closes the dialog
var form = dialog.find( "form" ).submit(function( event ) {
  addTab();
  dialog.dialog( "close" );
  event.preventDefault();
});

// actual addTab function: adds new tab using the input from the form above
function addTab() {
  var label = tabTitle.val() || "Tab " + tabCounter,
    id = "tabs-" + tabCounter,
    li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
    tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

  tabs.find( ".ui-tabs-nav" ).append( li );
  tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
  tabs.tabs( "refresh" );
  tabCounter++;
}

// addTab button: just opens the dialog
$( "#add_tab" )
  .button()
  .click(function() {
    dialog.dialog( "open" );
  });

// close icon: removing the tab on click
tabs.delegate( "span.ui-icon-close", "click", function() {
  var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
  $( "#" + panelId ).remove();
  tabs.tabs( "refresh" );
});

tabs.bind( "keyup", function( event ) {
  if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
    var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
    $( "#" + panelId ).remove();
    tabs.tabs( "refresh" );
  }
});

});

here is the url for jquery UI tab panel which i have used in my site [http://jqueryui.com/tabs/#manipulation].

how to directly open this newly added tab?

Answers 1

  • add following code in your addTab() function

        var lastChildIndex = $(".ui-tabs-nav").children().length - 1;
        $("div#tabs").tabs({active: lastChildIndex});
    

    What this does is it gets the index of the last child of your tabs list (the one you just added) and sets it to active.

    Example: http://jsfiddle.net/ujUu2/818/

    EDIT: Seeing as you already have a tabCounter in your code you can use that as the index for setting the last tab active instead of the var lastChildIndex I proposed.


Related Articles