DOjo dijit.byId('').show(); not working
I am trying to show a component,
<div dojoType="dojox.layout.TableContainer" cols="2" labelWidth="50%" colspan=2 id="durationPane" style="display: none;margin-left: 9px;" showLabels=false>
<div dojoType="dijit.form.DateTextBox" required="true" onChange="var x=arguments[0];x.setDate(x.getDate()+1);dijit.byId('toDate').constraints.min = x;" constraints="{datePattern:'MMM dd yyyy'}" label=" From Date :" id="fromDate" placeHolder="From Date" style="margin-bottom: 50px"></div&g开发者_JAVA百科t;
<div dojoType="dijit.form.DateTextBox" require="true" onChange="var x=arguments[0];x.setDate(x.getDate()-1);dijit.byId('fromDate').constraints.max =x;" constraints="{datePattern:'MMM dd yyyy'}" label="To Date :" id="toDate" placeHolder="To Date" name="vpnReport._toDate" ></div>
</div>
dijit.byId('durationPane').show();
But it's not showing.
This is a recurring problem with some Dojo "animation" effects such as show, hide, wipeIn, wipeOut, etc. For some reason, if you want page elements to start hidden, so you can show them latter, you cannot initialize them with "display: none" or "visibility: hidden" in the CSS.
Three different workarounds (all of which imply you do not have "display:none" set in the "durationPane" style):
- Add the following CSS to the duration pane: position: absolute; left: -999em; then, when you call .show(), also set style to left:0 - you only need to this the first time you call show, because on the next .hide() / .show(), everything works well. This is probably the worst solution because you have to make your element absolute, which can be messy.
Start with the element visible, and then hide it onload, e.g.
dojo.ready(function() { dijit.byId('durationPane').hide(); });
Start with the element visible, and the add the display:none also onload, e.g.
dojo.style('durationPane', { 'display' : 'none' });
This will do what you want. If anyone out there knows why Dojo has this strange behavior, and if there is a more elegant way to fix this problem, please let us know...
精彩评论