Home Dojo Dojo Show and Hide Dialog

Dojo Show and Hide Dialog
Posted on: November 1, 2008 at 12:00 AM

In this example, you will learn dojo show and hide dialog. In the following example, you will see there are two method that are used for showing and hiding the dialog box.

Dojo Show and Hide Dialog

In this example, you will learn dojo show and hide dialog. In the following example, you will see there are two method that are used for showing and hiding the dialog box.

show(): This method is used to display the dialog box.
hide(): This method is used to hide the dialog box.

Try Online: Show and Hide Dialog

Here is the code:

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Show and hide Dialog example</title>
  <style type="text/css">
  @import "../dijit/themes/soria/soria.css";
  @import "/resources/dojo.css";
  </style>

 <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true"></script>
  <script >
  dojo.require("dojo.parser");
  dojo.require("dijit.form.Button");
  dojo.require("dijit.Dialog");
  dojo.require("dijit.form.TextBox");
  dojo.addOnLoad(showDialog);
  dojo.addOnLoad(hideDialog);
  function showDialog() {
  dijit.byId('dialog1').show();
  }
  </script>
  </head>
  
  <body class="soria">
  <div dojoType="dijit.Dialog" id="dialog1" title="Login">
  <form action="Login" method="post" validate="true" id="loginForm">
  <table width="258">
  <tr>
  <td><label>Login</label></td>
  <td><input type="text" trim="true" dojoType="dijit.form.TextBox" 
value="" name="login" id="userId"/></td>
  </tr>
  <tr >
  <td><label>Password</label></td>
  <td><input type="password" trim="true" dojoType="dijit.form.TextBox" 
value="" name="password" id="password"/></td>
  </tr>
  <tr><td colspan="2">&nbsp;</td></tr>
  <tr>
  <td colspan="2" align="center">
  
  
  
  
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td  align="center" valign="top" width="40%">
  <!-- button ok -->  
  
  <button dojoType="dijit.form.Button" type="submit" id="LoginButton" 
onClick="return validate();">Ok</button></td>
  
 
 
  <td align="left" valign="top" width="3%">&nbsp;</td>
  
 <td align="left" valign="top" width="46%" >
 
 <!-- button cancel -->
 
  
  <button dojoType="dijit.form.Button" type="submit" onclick="document.Login.reset()" 
id="Cancel">Cancel</button></td>
 
  </td>
  
  <td width="11%" align="left" valign="top">&nbsp;</td>
  <td><button dojoType="dijit.form.Button" type="submit" onclick="showDialog();"
 id="resetPassword"> Show Dialog </button></td>
  
  </tr>
 </table>
  
  
  </td>
  </tr>
  </table>
  </form>
  </div>

<!-- Forgot Password Form-->

  <div dojoType="dijit.Dialog" id="dialog2" title="Forgot Password">
  <form action="doResetPassword.action" method="post" validate="true" 
id="resetPasswordForm">
  <table width="308">
  <tr>
  <td colspan="2"><label>Enter Login Name</label></td>
  <td><input type="text" trim="true" dojoType="dijit.form.TextBox" 
value="" name="userName" id="userName"/></td>
  </tr>
  <tr><td><B>Or</B></td></tr>
  <tr>
  <td colspan="2"><label>Enter Your Email Address</label></td>
  <td><input type="text" trim="true" dojotype="dijit.form.TextBox"
 value="" name="email" id="email"/></td>
  </tr>
  <tr>
  <td align="right">
  <button dojoType="dijit.form.Button" type="submit" onclick="validate1()" 
id="reset">Ok </button></td>
  <td align="right" valign="top"><button dojoType="dijit.form.Button" 
type="submit" onClick="hideDialog()"  id="cancel1">Hide Dialog </button> </td></tr>
  </table>
  </form>
  </div>



  <script>
  function validate(){

 userId = document.getElementById('userId').value
 password = document.getElementById('password').value
 errMsg=" ";
 if(userId == ""){
  errMsg +="Please enter User Name\n";
  }
 if(password == ""){
  errMsg +="Please enter Password" ;
  }
 if(errMsg!= " "){
 alert(errMsg);
 return false;
 }
 document.forms['loginForm'].submit();
  }

  </script>

  <script>
  function showDialog() {
  dijit.byId('dialog1').hide();
  var dlg = dijit.byId('dialog2');
  dlg.show();
  }

  function validate1(){

 userName = document.getElementById('userName').value
 email = document.getElementById('email').value
 errMsg=" ";
 
 if(userName == "" && email == ""){
  errMsg +="Please enter userName Or email address\n";
 }
 var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
 if (!(email == "")){
 if(reg.test(email) == false) {
 errMsg+='Invalid Email Address';
 }
 }
 
 if(errMsg!= " "){
 alert(errMsg);
 return false;
 }
 document.forms['resetPasswordForm'].submit();
  }


  function hideDialog(){
  
  var dlg = dijit.byId('dialog2');
  dlg.hide();
  dijit.byId('dialog1').show();
  }
  </script>
  </body>
</html>

Output:

If you click on the "Show Dialog" Command button then you get:

Try Online:

Related Tags for Dojo Show and Hide Dialog:
ide, dojo, dialog, method, sed, hide, this, id, log, show, for, example, box, learn, exam, sh, ear, e, hid, il, use, in, m, j, me, how, do, xa, xamp, s, ee, at, hiding, is, ha, ll, mpl, follow, dia, ea, and, ar, wing, tw, s, s, th, sho, hat, ple, pl, nd, ol, o

«Previous Index Next»