citizens

My Kung Fu doesn't work in Dojo!

Discussion created by citizens on Aug 4, 2010
Latest reply on Aug 4, 2010 by citizens
Alright, I'm embarassed to say that I have spent all day working on what appears to be a very simple function. Online reference and forums have been no help.

I have a TabContainer with 3 ContentPanes (tabs). When a "tab" (contentpane that is child to the tabcontainer) is clicked I want to be able to retrieve its "id" attribute so I can "makeSomethingHappen();" that is specific to that tab ("id").

I found lots of references and examples online, but none of them work. The attribute information keeps coming back undefined.

You're supposed to be able to use the selectChild and/or selectedChildWidget of the TabContainer to enable this functionality, but I have yet to find a way to make it work.

Thanks for any thoughts or alternatives that solve my problem!!!!

Here is a simple sample:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
   
    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
        </script>
        <script type="text/javascript">
         dojo.require("dijit.layout.TabContainer");
            dojo.require("dijit.layout.ContentPane");
  
  function doSomething() {
   //Put code in here that identifies the selected tab and displays it's "id" in the below alert
   alert("Hello World!");
  }
  
        </script>
       
    </head>
   
    <body class=" claro ">
  <div id="mainTab" dojoType="dijit.layout.TabContainer" style="width: 400px; height: 100px;" onClick="doSomething();">
            <div id="tab1" dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
                Lorem ipsum and all around...
            </div>
            <div id="tab2" dojoType="dijit.layout.ContentPane" title="My second tab">
                Lorem ipsum and all around - second...
            </div>
            <div id="tab3" dojoType="dijit.layout.ContentPane" title="My last tab">
                Lorem ipsum and all around - last...
            </div>
        </div>
    </body>

</html>

Outcomes