Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Dojo Dojo ToolTipsDialog

Related Tutorials


 
 

Share on Google+Share on Google+

Dojo ToolTipsDialog

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

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:

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



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

Related Tutorials

Discuss: Dojo ToolTipsDialog   View All Comments

Post your Comment


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