Ajax example: Modal Window (pop-up)

Description

This example shows how to use a modal window for changing user password. The new password is verified and updated without page refresh.

Usage

Select a User from the list. The user information is displayed without page refresh.
Click the "Change password" link, modify the password and click "Submit". The password will be saved in the background and information updated on the page.

Steps to recreate

Add Update Panel component selecting it from the "Forms" tab of the Toolbox window. Leave the default Panel1 name.
Run Grid and Record Builder to create the Grid and Record forms based on the users table inside the update panel.
Add two panel components to the Record Form and name them "Reg" and "Edit".
Add two textbox controls: "user_password" and "cuser_password" inside the Reg panel and a "changePass" Link control into the Edit panel.
To the Record’s Before Show event add the appropriate programming code to hide-show the panels.
```
   userss.Reg.Visible = not userss.EditMode
   userss.Edit.Visible = userss.EditMode
		
```
Specify Custom Insert and Custom Update operations in Record Form’s properties.

Add the appropriate programming code to Record Form’s onValidate event, as is shown in the example:

If (not userss.EditMode) Then
       If (userss.user_password.Value <> userss.cuser_password.Value) Then
           userss.Errors.addError("Password and confirmation password doesn't match")
       End If
       If (Len(userss.user_password.Value) < 5) Then
           userss.Errors.addError("Password length must be more than 5 symbols")
       End If
   End If

The code is used to check that the password and confirmation password values are identical. Password values should be at least five characters in length for a minimum level of security

Create a new Update Panel called Panel2.
Inside the Panel2, use Record Builder to create "changePass" Record based on the users table from the InternetDB database. This Record will be used to change user password so it is supposed to work in Edit mode only.
Add three TextBox controls called "opass", "npass" and "cpass" and a Hidden "uid" field to the Record form.
Set up Custom Update for the form as shown in the example.
Open panel Features property and add ShowModal feature.

Add the appropriate programming code to the "changePass" Record’s onValidate event.

If (changePass.cpass.Value <> changePass.npass.Value) Then
         changePass.Errors.addError("Password and confirmation password doesn't match")
   End If
     dim c
   c = CCDLookUp("COUNT(*)","users","user_id="&DBInternetDB.ToSQL(changePass.uid.Value,ccsInteger)&" AND user_password="&DBInternetDB.ToSQL(changePass.opass.Value,ccsText),DBInternetDB)
     If (c < 1) Then
         changePass.Errors.addError("Current password and entered password doesn't match")
   End If
   If (Len(changePass.npass.Value) < 5) Then
       changePass.Errors.AddError "Password length must be more than 5 symbols"
   End If

The code checks that the value of the existing password precisely matches the one specified in the Old Password field and the Confirmation Password matches the New Password value. The new password value should be at least five characters in length for a minimum level of security.

Add Retrieve Value for Control action to the Hidden’s Before Show event.
- Set uid in the Control Name property.
- Select URL in the Source Type property.
- Set user_id in the Source Name property.
  This action will be used to retrieve a value from the user_id URL parameter and assign it to a Hidden "uid" control.

Add the appropriate javascript code to the "changePass" Record’s client-side OnLoad event.

document.getElementById('Panel2changePassuid').value = document.getElementById('Panel1userssuser_id').value;        if (document.getElementById("errors") == null)
   {
       Panel2ShowModal1_hide();
   }
   else
   {
       Panel2ShowModal1_show();
   }
   $("Panel2changePassCancel").onclick = function()
       {
           Panel2UpdatePanel1_refresh();
           Panel2ShowModal1_hide();
           return false;
       }
16. Add the javascript code to the "userss" Record’s client-side OnLoad event:

   if ($("Panel1userssEditchangePass") != null)
       $("Panel1userssEditchangePass").onclick = function()
       {
           Panel2ShowModal1_show();
           return false;
       }

This code displays the Modal Window when the "changePass" Link is clicked on the Record form.

Open Panel2 panel’s Features and add ClientCustomCode feature using UpdatePanel1 component’s onrefresh event as a Start Event for the feature.
The custom code looks like:
```
$("Panel2").location = window.location.href;
		
```

Similarly add Client Custom Code action to be fired on the "changePass" Link’s onClick event.
The code for the action is:

document.getElementById("Panel2changePassuid").value = 

document.getElementById("Panel1userssuser_id").value;

Switch to Html Mode and add the following line to the user_login TextBox’s html code:
```
<font color="red"><span id="loginwarning"> </span></font>
		
```
Red color of the warning message will help users quickly find out if a user with the specified login already exists.

Add RemoteCustomCode feature to the user_login TextBox control. Use client onChange event as a Start Event for the feature:
Start Event: Panel1userssuser_login.OnChange;
The RemoteCustomCode script is:

method = "post";
     parameters["login"] = document.getElementById("Panel1userssuser_login").value;

The code above sends the specified login value to the server using POST method.
The server-side RemoteCustomCode part checks whether the specified login value already exists in the database.

Dim c
   Dim Conn
   Set Conn = New clsDBInternetDB
   Conn.Open
   c = CCDLookUp("COUNT(*)","users","user_login="&Conn.ToSQL(CCGetFromPost("login", Empty),ccsText),Conn)
   Response.Write(c)
and returns the result to the client in a string format.

      if (transport.responseText == 0)
           {
               document.getElementById("loginwarning").innerHTML = "";
           }
           else
           {
               document.getElementById("loginwarning").innerHTML = "This login already taken";
           }

So if a user with the specified login already exists in the database, "This login already taken" message will appear in the user_login TextBox.

To change the style of the Modal Window the ModalWindow_style.css file with the following css code can be added:

/*Page Style @modal-56276963*/
.ModalShowDiv {
    position: absolute;
    margin: 100px auto;
    background-color: transparent;
    border:0px solid #000;
    padding:0px;
    text-align:center;
    z-index: 200;
    display: none;
    top: 100px;
    left: 50%;
    margin-left: -134px;
}
/*End Page Style*/

Make cosmetic changes as needed by modifying the text and captions within the HTML.

Database Tables used:

Database: Internet

Tables: users