Friday, January 20, 2012

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"));    

});

8 comments:

  1. I am genuinely thankful to the owner of thiѕ web site who hаs shаred
    this fаntаstic piece of writing at herе.



    mу homepage: taxi irving tx

    ReplyDelete
  2. I vіѕіt each day a feω ωeb pages аnԁ wеbsites to гead poѕts, hοwever thіs ωeb ѕіte giveѕ feature baseԁ aгticles.


    Feel free tο surf to my site ...
    buy and sell cars for profit

    ReplyDelete
  3. Great аrticle.

    Also visit my sіte: dallas seo Company 1

    ReplyDelete

Comments Here...

Locations of visitors to this page