This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal



Apr 15, 2011, 9:05 PM
10 Posts

Way To Keep User on Current Tab with dijit.layout.ContentPane

  • Category: Dojo and Client Side JavaScript
  • Platform: Windows
  • Release: 8.5.2
  • Role: Developer
  • Tags: dijit tabs
  • Replies: 0
Hopefully this will help somebody else out, because it was driving me nuts! 
 
I have several xPages with dijit.layout.TabContainer and ContentPane's on them.  And because when you put a document in edit mode or save it, it always defaults to the first tab, my users were complaining.  So with help from John Mackey, I use this code to have the document stay on the tab the user was on.

1.  On my Custom Control that contains the actual TabContainer and ContentPanes, I added the following to the TabContainer - onClick="getTabName"
2.   Also on that Custom Control I have the getTabName function.  Note that I'm calling a setCookie function to get the name of the selected tab.
 
<script type="text/javascript">
<![CDATA[

// This gets the tab the user is currently on, so we can set it when the user saves or edits the document
dojo.require("dojo.NodeList-traverse");

function getTabName(e)

{
        // Lookup what tab the user is on
        var tab = dojo.query(e.target).parents('.dijitTab')[0];
        if (tab) {
        
        // As the widgetId contains the full path, we just want the tab id
         var userHere = tab.getAttribute('widgetId').toString();
         var underBar = userHere.lastIndexOf("_");
         var justTabName = userHere.substring(underBar + 1);
        setCookie('justTabName',userHere.substring(underBar + 1),'1');
        }
    }   
             
]]>
</script>
 Then, I have the following on another Custom Control that contains this my xPage (I just do this for it's looks in the client - you could just add the code to your xPage itself.)
 
 <script>

 <![CDATA[
   
        function checkCookie()
    {
        var justTabName = getCookie("justTabName");
        if((justTabName != null) && (justTabName != ""))
        {
            var tabs = dijit.byId('tabs');
            var homePane = dijit.byId(justTabName);
            tabs.selectChild(homePane);
        }
        else
        {
            // Don't do anything
        }
    }
    
    
    function getCookie(c_name)
        {
            var i,x,y,ARRcookies=document.cookie.split(";");
            for (i=0;i<ARRcookies.length;i++)
              {
                  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
                  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
                  x=x.replace(/^\s+|\s+$/g,"");
                 if (x==c_name)
                {
                    return unescape(y);
                }
              }
        }
    
      ]]>

      function setCookie(c_name,value,exdays)
      {
         var exdate=new Date();
        exdate.setDate(exdate.getDate() + exdays);
        var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
        document.cookie=c_name + "=" + c_value;
       }

      
 dojo.addOnLoad(checkCookie);
    </script>
   And that's it!  What I'm going to do now, is create another cookie to carry an identifier of the document itself, because with the above, if the user selects another document with this same xPage, it defaults to the selected tab on this document.

This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal