Home Dojo Dojo ToolTipsDialog

Dojo ToolTipsDialog
Posted on: November 1, 2008 at 12:00 AM

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:

Related Tags for Dojo ToolTipsDialog:
c, dojo, dialog, ip, tips, tooltip, this, tooltips, tool, log, oo, example, to, learn, exam, ws, ear, e, il, dev, in, psd, m, ps, j, how, rate, do, xa, xamp, s, sdi, tip, ee, at, is, ll, mpl, follow, develop, dia, ea, and, ar, cod, code, wing, s, s, th, ple, pl, nd, ode, ol, o

«Previous Index Next»