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>