Hi all, this is my first post and i'm stuck with something that's maybe more simple than i'm thinking...
I have a layout, inside it (client) i have a split container, on its left side i have an accordion and on the right side a container, for all kind of stuff/widgets. All of this is programmatically created. After this and according to the navigation i create widgets as necessary in the right side. Here is the problem... Some of them are created by an ajax call after some action: if the user clicks some link, it will create (programmatically) a tabcontainer and will then replace it's innerHTML with some content. This content ca be a widget (markup). The problem is that these created widgets will not be recognized as children of the tabcontainer previously created...
How can i force the markup widgets to be recognized? i'm creating a multiselect and the switch buttons doesn't work because the dijit.byId doesn't find the select widget.
Thanks in advance! If it's necessary, i can put some code to help the analysis.
Dinis.
The initial page layout:
<div dojoType="dijit.layout.LayoutContainer" style="width: 100%; height: 100%; padding: 0; margin: 0; border: 0;">
<div dojoType="dijit.layout.ContentPane" layoutAlign="top">
<div id="header">
<div id="user-info">
...
</div>
</div>
<!-- ALL OTHER CODE COME'S HERE -->
</div>
</body>
The content of the main page :
<div dojotype="dijit.layout.SplitContainer" orientation="horizontal" sizerwidth="7" activesizing="false" style="border: 1px solid rgb(191, 191, 191); float: left; ">
<div dojotype="dijit.layout.ContentPane" sizemin="20" sizeshare="20">
<div dojoType="dijit.layout.AccordionContainer" duration="200" id="listPane"
style="margin-right: 0px; width: 100%; height: 100%; overflow: hidden">
.......... stuff in the accordion ... (working)
</div>
</div>
<div dojotype="dijit.layout.ContentPane" sizemin="80" sizeshare="80" id="contentPane">
<div id="details"></div>
.... the problem comes inside this contentPane
</div>
</div>
</div>
</div>
The tabs created inside the right contentPane after an ajax call
This part is created nicelly, but the content of a tab (bellow) isn't consider a tab child...
clearContentPane('Administration');
var containerEl = dojo.byId('contentPane');
var tabDiv = document.createElement('div');
tabDiv.setAttribute('id', 'adminTabDiv');
containerEl.appendChild(tabDiv);
var div1 = document.createElement('div');
tabDiv.appendChild(div1);
var div2 = document.createElement('div');
tabDiv.appendChild(div2);
var div3 = document.createElement('div');
tabDiv.appendChild(div3);
var cp1 = new dijit.layout.LayoutContainer( {id:"accessTab", title:"Access"}, div1 );
var cp2 = new dijit.layout.LayoutContainer( {id:"passwordTab", title:"Password"}, div2 );
var cp3 = new dijit.layout.LayoutContainer( {id:"userDbTab", title:"User database"}, div3 );
//cpx.setContent() if needed
var tabs = new dijit.layout.TabContainer( {id:"tabs", style:"width: 100%; height: 100%;"}, tabDiv );
tabs.addChild(cp1);
tabs.addChild(cp2);
tabs.addChild(cp3);
tabs.startup();
}
The page inside a tab -- this is where the problem resides!!! :
dojo.addOnLoad(function() {
dijit.byId('tabs').startup();
dojo.query("button.switch")
.connect("onclick", function(e) {
switch (e.target.id.toString()) {
case "left" : dijit.byId("sel1").addSelected(dijit.byId("sel2")); break;
case "right" : dijit.byId("sel2").addSelected(dijit.byId("sel1")); break;
}
dijit.byId("sel1").refresh();
dijit.byId("sel2").refresh();
});
dojo.connect(dojo.byId("test"), "onsubmit", function(e) {
e.preventDefault();
});
dojo.connect(dojo.byId("formSubmit"), "onclick", function(e) {
alert('SUBMIT ACTION');
});
});
</script>
form ....
<table>
<td>
<select id="sel1" multiple="true" name="sel1" dojoType="dijit.form.MultiSelect"
style="height:100px; width:175px; border:5px solid #ededed;">
...options...
</select>
</td>
<td>
<button class="switch" id="left"><</button>
<button class="switch" id="right">></button>
</td>
<td>
<select id="sel2" multiple="true" name="sel2" dojoType="dijit.form.MultiSelect"
style="height:100px; width:175px; border:5px solid #ededed;">
...options...
</select>
</td>
<tr>
... submit button ...
</tr>
</table>