Home Dojo Dojo Show and Hide Dialog
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Dojo Show and Hide Dialog

Advertisement
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. 

  1. show(): This method is used to display the dialog box.
  2. 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:

Advertisements

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: November 1, 2008

Ask Questions?    Discuss: Dojo Show and Hide Dialog  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com