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

});

ibm.xsp.widget.layout.DateTextBox in Xpages

Sometimes in every software development we do, we often learn the hard way. Though we read plenty of forums and blogs, we often find something that is unique from the previous task we have done.

Date Time Picker in XPAGES

Cite for example is Calendar Date Time Picker, where dojoType ibm.xsp.widget.layout.DateTextBox is associated into after page load. Firefox, Google Chrome and Safari rendered the Calendar Date Time Picker properly. But in IE is sucks. Yes it sucks. Though we apply the Emulator for IE8 or IE9, still it doesn't work properly. But we can’t tell this to the client that they must use other browser other than IE because most of the end users comfortably utilizing the Internet Explorer. So we must find a workaround.

After spending time and effort in debugging what went wrong in Calendar Date Picker in IE, I finally found the workaround.

In Calendar Date Picker in XPage, it has ibm.xsp.widget.layout.DateTextBox dojoType. And when the browser launch the Xpage,  parseOnLoad is set to true even if you set it to false in Custom Control Properties ->All Properties ->dojo->dojoParseOnLoad.

So the parsing of the dijit will occur immediately but as IE as being "slow renderer", the Calendar Picker sometimes or most of the time does not parse properly.

To save you from headache, parsing  the dijits manually after page load. Doing so is calling one function away:

You could stipulate the code in Client Side javascript Library or in onClientLoad of custom control or XPage.

dojo.addOnLoad(function( ) {

                dojo.parser.parse(); //manually parse after the page loads

});

This will give you assurance that the Calendar Date Picker will load properly. Or you could load specific dijit component by supplying parent node as parameter for parsing such as dojo.parser.parse(document.getElementsByTagName("button")[0].parentNode);

You can find the reference for this code in Oreilly's Dojo: The Definitive Guide June 2008 page 258.


Another workaround that i found is without using the compatibity mode and can be found here.