开发者

DOjo dijit.byId('').show(); not working

开发者 https://www.devze.com 2023-03-10 04:51 出处:网络
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

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):

  1. 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.
  2. Start with the element visible, and then hide it onload, e.g.

    dojo.ready(function() { dijit.byId('durationPane').hide(); });
    
  3. 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...

0

精彩评论

暂无评论...
验证码 换一张
取 消