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
Post a Comment