Ajax example: Modal Window (pop-up)


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


  1. Select a User from the list. The user information is displayed without page refresh.
  2. 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

  1. Add Update Panel component selecting it from the "Forms" tab of the Toolbox window. Leave the default Panel1 name.
  2. Run Grid and Record Builder to create the Grid and Record forms based on the users table inside the update panel.
  3. Add two panel components to the Record Form and name them "Reg" and "Edit".
  4. Add two textbox controls: "user_password" and "cuser_password" inside the Reg panel and a "changePass" Link control into the Edit panel.
  5. 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
  6. Specify Custom Insert and Custom Update operations in Record Formís properties.
  7. 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
  8. Create a new Update Panel called Panel2.
  9. 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.
  10. Add three TextBox controls called "opass", "npass" and "cpass" and a Hidden "uid" field to the Record form.
  11. Set up Custom Update for the form as shown in the example.
  12. Open panel Features property and add ShowModal feature.
  13. 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.
  14. Add Retrieve Value for Control action to the Hiddenís Before Show event.
  15. 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)
       $("Panel2changePassCancel").onclick = function()
               return false;
    16. Add the javascript code to the "userss" Recordís client-side OnLoad event:
       if ($("Panel1userssEditchangePass") != null)
           $("Panel1userssEditchangePass").onclick = function()
               return false;
    This code displays the Modal Window when the "changePass" Link is clicked on the Record form.
  16. 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;
  17. 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 = 
  18. 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.
  19. 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
       c = CCDLookUp("COUNT(*)","users","user_login="&Conn.ToSQL(CCGetFromPost("login", Empty),ccsText),Conn)
    and returns the result to the client in a string format.
          if (transport.responseText == 0)
                   document.getElementById("loginwarning").innerHTML = "";
                   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.
  20. 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;
        z-index: 200;
        display: none;
        top: 100px;
        left: 50%;
        margin-left: -134px;
    /*End Page Style*/
  21. Make cosmetic changes as needed by modifying the text and captions within the HTML.

Database Tables used:

Database: Internet

Tables: users