dojo - Dijit: cannot edit all textboxes in the first dialog after showing the second dialog -


i set dijitdialogunderlaywrapper none display show 2 dialog boxes (both of them contains textboxes) 1 one on screen.

the problem when click on first dialog, textboxes on cannot edited until closed second dialog. however, textboxes on second dialog can edited whenever click on it.

what want when activate (focus on) 1 of dialog boxes, textboxes on dialog can edited. tried use"focusutil.focus" on first dialog failure. have idea? thanks.

here source: jsfiddle.net/calgis/al5auzja/

the dialog on top 1 able focus. design. can see dojo code reference : https://github.com/dojo/dijit/blob/master/dialog.js#l674-l691

there no nice way avoid dialog. however, there little hack (note: may cause other problems). have override focus method of dialog empty one.

in snippets, key part data-dojo-props="focus:function(){}"

require(["dojo/parser", "dijit/dialog", "dijit/form/button", "dijit/form/textbox", "dijit/form/datetextbox", "dijit/form/timetextbox"], function(parser) {    parser.parse()  });    document.body.classname = "tundra"; //only usefull in snippets
.dijitdialogunderlaywrapper{  		display:none !important  		}  		.nonmodal{  			background-color:rgba(211, 211, 211, 0.9);          }  }
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>  <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">   <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">       <div data-dojo-type="dijit/dialog" data-dojo-props="focus:function(){}" data-dojo-id="myformdialog" title="dialog1">        <div class="dijitdialogpanecontentarea">          <table>              <tr>                  <td><label for="firstname">first name: </label></td>                  <td><input data-dojo-type="dijit/form/textbox" type="text" name="name" id="firstname"></td>              </tr>               <tr>                  <td><label for="lastname">last name: </label></td>                  <td><input data-dojo-type="dijit/form/textbox" type="text" name="name" id="lastname"></td>              </tr>              <tr>                  <td><label for="date">date: </label></td>                  <td><input data-dojo-type="dijit/form/datetextbox" data-dojo-id="mystartdate" onchange="myenddate.constraints.min = arguments[0];" type="text" name="sdate" id="sdate"></td>              </tr>                            <tr>                  <td><label for="desc">description: </label></td>                  <td><input data-dojo-type="dijit/form/textbox" type="text" name="desc" id="desc"></td>              </tr>          </table>      </div>        <div class="dijitdialogpaneactionbar">          <button data-dojo-type="dijit/form/button" type="submit" onclick="return myformdialog.isvalid();">              ok          </button>          <button data-dojo-type="dijit/form/button" type="button" onclick="myformdialog.hide()">              cancel          </button>      </div>  </div>        <div data-dojo-type="dijit/dialog" data-dojo-props="focus:function(){}" data-dojo-id="myformdialog2" title="dialog2">        <div class="dijitdialogpanecontentarea">          <table>              <tr>                  <td><label for="name">name: </label></td>                  <td><input data-dojo-type="dijit/form/textbox" type="text" name="name2" id="name2"></td>              </tr>              <tr>                  <td><label for="date">date: </label></td>                  <td><input data-dojo-type="dijit/form/datetextbox" data-dojo-id="mystartdate" onchange="myenddate.constraints.min = arguments[0];" type="text" name="sdate2" id="sdate2"></td>              </tr>                            <tr>                  <td><label for="desc">description: </label></td>                  <td><input data-dojo-type="dijit/form/textbox" type="text" name="desc" id="desc2"></td>              </tr>          </table>      </div>        <div class="dijitdialogpaneactionbar">          <button data-dojo-type="dijit/form/button" type="submit" onclick="return myformdialog2.isvalid();">              ok          </button>          <button data-dojo-type="dijit/form/button" type="button" onclick="myformdialog2.hide()">              cancel          </button>      </div>  </div>    <p>click button show dialogs:</p>  <button id="buttonthree" data-dojo-type="dijit/form/button" type="button" onclick="myformdialog.show();">      show dialog 1  </button>  <button id="buttonthree2" data-dojo-type="dijit/form/button" type="button" onclick="myformdialog2.show();">      show dialog 2  </button>


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -