Dijit.TabContainer Tutorial That Dynamically Selects The Opened Tab Even after Refreshing the Xpage

Using the native dijit.TabContainer in XPages entails a lot of Coding than the drag-and-drop Tabbed Panel control. Though we configure a lot using this, it has an advantage in loading and usability. We could choose tab that doesn't need to load/refresh the page. Because sometimes we use Full Refresh in Events, the dijit.TabContainer will go back to the first tab.

For this predicament, Ive searched the resolution. I save the selected tab and use it dynamically to select that tab when fully update is fired.

Here is the code for the XML of the Tab Container.

var tabs = dijit.byId("tabsContainer");

//Select the dijit if the cookie is defined then we select the tab that is saved in our cookie

if(String(dojo.cookie("selectedTabID"))!="undefined"){

      var tabs = dijit.byId("tabsContainer");

      //If pane is existed then select the child(ContentPane) in TabContainer

      pane = dijit.byId(String(dojo.cookie("selectedTabID")))

      if(pane){

            tabs.selectChild(pane);

      }

}

//if child is selected using the selectChild then we save the child(ContentPane)’s id in the cookie name selectTabID

dojo.connect(tabs,"selectChild",function(child){

      dojo.cookie("selectedTabID", (child).attr("id"));    

});