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



Jun 28, 2013, 3:32 PM
6 Posts
topic has been resolvedResolved

Select a Dojo Pane with JavaScript

  • Category: Dojo and Client Side JavaScript
  • Platform: Windows
  • Release: 9.0
  • Role: Developer
  • Tags:
  • Replies: 2

I have a Dojo Tab Container that contains a few Dojo Tab Pane children.  I want to programatically switch the  user to  the Tab Pane with the id  "djTab_map". 

I put the following simple 3 lines of code into a CSJS  button:

var TabContainer = dijit.byId("djTabContainer1");

var subTab = dijit.byId("djTab_map"); 

TabContainer.selectChild(subTab);

The last (3rd) line causes an error. In the IE debugger I see

  'undefined' is null or not an object             dojo.js, line 15 character 143969

 

Can anybody see why this does not work? Simply clicking directly on each tab pane works fine.

 

Thank You

TBear

Jun 28, 2013, 4:56 PM
54 Posts
Select

this one works for me.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    dojoParseOnLoad="true">
    <xp:this.resources>
        <xp:dojoModule name="dijit.layout.ContentPane"></xp:dojoModule>
        <xp:dojoModule name="dijit.layout.SplitContainer"></xp:dojoModule>

        <xp:dojoModule name="dijit.layout.TabContainer"></xp:dojoModule>
    </xp:this.resources>

    <div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
        style="width:400px;height:200px">
        <div id="tab1" dojoType="dijit.layout.ContentPane"
            title="First Tab" selected="true" closable="false">
            First Tab
        </div>
        <div id="tab2" dojoType="dijit.layout.ContentPane"
            title="Second Tab" closable="true">
            Second Tab
        </div>
        <div id="tab3" dojoType="dijit.layout.ContentPane"
            title="Third Tab" closable="true">
            Third Tab
        </div>
    </div>
    <xp:button value="Label" id="button1">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[ var TabContainer = dijit.byId("mainTabContainer");

var subTab = dijit.byId("tab1");
TabContainer.selectChild(subTab);]]></xp:this.script>
        </xp:eventHandler></xp:button></xp:view>

Jun 28, 2013, 6:42 PM
6 Posts
Problem was the ID on the DOJO controls

I had simply dragged the DOJO controls onto the xPage as they are simply there in V9.0.. A glance at the source browser source code revealed that their ID tags get significantly modified for the client side.

I needed to change 

var TabContainer = dijit.byId("djTabContainer1");  

to

TabContainer = dijit.byId("view:_id1:djTabContainer1");

and

var subTab = dijit.byId("djTab_map");

to

var subTab = dijit.byId("view:_id1:djTabContainer1:djTab_map");

Works Fine now

TBear


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