[an error occurred while processing this directive]

Dojo ToolTipsDialog

                         

In this example you will learn how to develop a dojo tooltipsdialog. You see the following code and follows the following code and crate a ToolTipsDialog.

If you click on the "Change Password" command button the you get a dialog box under this command button. Similarly, you get the whenever, you click on the the "Forgot Password" command button the you get a dialog box under this command button.

Try Online: ToolTipsDialog

 

 

 

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" 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();">User Login</button></td>
      
                 <td align="left" valign="top" width="40%" >
         
         <!-- button cancel -->
         
        
          <button dojoType="dijit.form.Button" type="submit" 
onclick=
"document.Login.reset()" id="Cancel">Cancel</button></td>
                   
          </td>
        
        
        
                  </tr>
           </table>
        
            
        </td>
          </tr>
        </table>

        <table width="180" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td>
          <div dojoType="dijit.form.DropDownButton">
              <span>Change Password</span>
              <div dojoType="dijit.TooltipDialog" id="dialog12" 
title="First Dialog" execute="checkPw(arguments[0]);">
                <table>
                  <tr>
                  <td><label for="name">Old Password: </label></td>
                      <td><input dojoType="dijit.form.TextBox" type="password"
 
name="oldpw" id="oldpw"></td>
                  </tr>
                  <tr>
                      <td><label for="loc">New Password: </label></td>
                      <td><input dojoType="dijit.form.TextBox" type="password"
 
name="newpw" id="newpw"></td>
                  </tr>
                  <tr>
                      <td><label for="desc">Confirm New Password: </label></td>
                      <td><input dojoType="dijit.form.TextBox" type="password" 
name="confirmpw" id="confirmpw"></td>
                  </tr>
                  <tr>
                      <td colspan="2" align="center">
                          <button dojoType=dijit.form.Button type="submit" 
onclick=
"changePassword();">Submit</button></td>
                  </tr>
                </table>
              </div>
          </div>
        </td>
<td>&nbsp;</td>
          <td>
          <div dojoType="dijit.form.DropDownButton">
              <span>Forgot Password</span>
              <div dojoType="dijit.TooltipDialog" id="dialog11" title="First Dialog"
 
execute="checkPw(arguments[0]);">
                <table>
                  <tr>
                  <td><label>Enter UserId: </label></td>
                      <td><input dojoType="dijit.form.TextBox" type="text" 
name="userId"></td>
                  </tr>
                  <tr><td>Or</td></tr>
                  <tr>
                      <td><label>Enter Email Address: </label></td>
                      <td><input dojoType="dijit.form.TextBox" type="text" 
name="email"></td>
                  </tr>
                  
                  <tr>
                      <td colspan="2" align="center">
                          <button dojoType=dijit.form.Button type="submit">
Submit</button></td>

                  </tr>
                </table>
              </div>
          </div>
        </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 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();
          }


    </script>
    <script>
      function changePassword(){
        newpw=document.getElementById('newpw').value
        confirmpw=document.getElementById('confirmpw').value
        if (newpw!=confirmpw){
          alert('Please enter correct confirm password.');
        }
        else{
        alert('You can do any type of action');
        }
      }
    </script>
  </body>
</html>

Output:

Click on the Change Password Command button:

Click on the Forgot Password command button:

 

Try Online:

                         

Ask programming questions?

 

 

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

Current Comments

1 comments so far (post your own) View All Comments Latest 10 Comments:

Try this:
1. Click on 'Change Password' or 'Forgot Password' button
2. type anything in the text field

In IE, u cannot enter any text!!
In FireFox, you can enter a text but the text is in different color or you cannot edit or backspace your text!!!

-- Is DOJO doing it or you made a mistake at coding???

Posted by Dojo Optimistics on Monday, 12.15.08 @ 14:00pm | #82791

      View This Comment Separately
  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]