[an error occurred while processing this directive]

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:

                         

Ask programming questions?

 

 

Add This Tutorial To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 

Current Comments

0 comments so far (post your own) View All Comments Latest 10 Comments:
  JDO Tutorials
  EAI Articles
  Struts Tutorials
  Java Tutorials
  Java Certification

Tell A Friend
Your Friend Name

 

 
Browse all Java Tutorials
Java JSP Struts Servlets Hibernate XML
Ajax JDBC EJB MySQL JavaScript JSF
Maven2 Tutorial JEE5 Tutorial Java Threading Tutorial Photoshop Tutorials Linux Technology
Technology Revolutions Eclipse Spring Tutorial Bioinformatics Tutorials Tools SQL
 

Home | JSP | EJB | JDBC | Java Servlets | WAP  | Free JSP Hosting  | Search Engine | News Archive | Jboss 3.0 tutorial | Free Linux CD's | Forum | Blogs

About Us | Advertising On RoseIndia.net  | Site Map

India News

Send your comments, Suggestions or Queries regarding this site at roseindia_net@yahoo.com.

Copyright 2007. All rights reserved.

[an error occurred while processing this directive]