Login or Cancel Application Using Ajax
This section provides you, an easy and complete
implementation of login application with features like submit and cancel buttons
using the Ajax (DOJO). This
application also checks the user validation i.e. the logging user is valid
or not.
Lets develop a login application using Ajax with
features like submit and cancel buttons. This login application first
authenticates a user, it asks the login name and password (Both the login name
and password is "Admin") from the user. It displays a welcome
page, when both fields are correctly filled by the user. Otherwise it displays
an error and DEBUG messages (Invalid user name and password! Please try
again! and DEBUG: widget ID collision on ID: ajaxLogin_0).
If you want to
cancel the filled-up details from the form then click the "Cancel" button.
After clicking, it again asks for the login name and password.
Create an action mapping in the struts.xml file. Here
is the code to be added in the struts.xml:
<action name="showAjaxLoginCancelForm">
<result>/pages/ajaxloginCancel.jsp</result>
</action>
<action name="ajaxloginCancel" class="net.roseindia.Login">
<result name="input">/pages/ajaxloginCancel.jsp</result>
<result name="error">/pages/ajaxloginCancel.jsp</result>
<result name="cancel" type="redirect">/pages/ajaxloginCancel.jsp</result>
<result>/pages/ajaxloginsuccess.jsp</result>
</action> |
Develop an action class that handles the login and
cancel request and it also checks for the user authentication. If the user name
and password is "Admin" then it returns SUCCESS otherwise ERROR
strings. Whenever you click the "Cancel" button, it returns the
NONE field (NONE field: The action execution was successful
but did not show a view).
Here is the code of "Login.java"
action class:
package net.roseindia;
import com.opensymphony.xwork2.ActionSupport;
import java.util.Date;
/**
* <p> Validate a user login. </p>
*/
public class Login extends ActionSupport {
public String execute() throws Exception {
if(!getUsername().equals("Admin") || !getPassword().equals("Admin")){
addActionError("Invalid user name or password! Please try again!");
return ERROR;
}
if(getUsername().equals("Admin") || getPassword().equals("Admin")){
return SUCCESS;
}else{
return NONE;
}
}
// ---- Username property ----
/**
* <p>Field to store User username.</p>
* <p/>
*/
private String username = null;
/**
* <p>Provide User username.</p>
*
* @return Returns the User username.
*/
public String getUsername() {
return username;
}
/**
* <p>Store new User username</p>
*
* @param value The username to set.
*/
public void setUsername(String value) {
username = value;
}
// ---- Username property ----
/**
* <p>Field to store User password.</p>
* <p/>
*/
private String password = null;
/**
* <p>Provide User password.</p>
*
* @return Returns the User password.
*/
public String getPassword() {
return password;
}
/**
* <p>Store new User password</p>
*
* @param value The password to set.
*/
public void setPassword(String value) {
password = value;
}
}
|
Develop a Login or Cancel Form Using Ajax : The
GUI of the application consists of a login form (ajaxloginCancel.jsp). This jsp page uses the <s:div>
tag, this tag creates a content area that can load its content using Ajax tags,
optionally refreshing. Here we also use the <s:submit> tag that is
used to update element (s) or submit a form with the help of Ajax. The
"Cancel" button calls submit tag to notify an action to perform cancel
operation.
Whenever an error occurs then the <s:actionerror>
and <s:fielderror> tags execute and the page displays an error
message.
Here is the code of ajaxloginCancel.jsp
file:
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<s:head theme="ajax" debug="true"/>
</head>
<body>
<s:div id="loginDiv" theme="ajax">
<div style="width: 300px;border-style: solid">
<s:form action="ajaxloginCancel" validate="true">
<tr>
<td colspan="2">
Login
</td>
</tr>
<tr>
<td colspan="2">
<s:actionerror />
<s:fielderror />
</td>
<s:textfield name="username" label="Login name"/>
<s:password name="password" label="Password"/>
<s:submit value="Submit" theme="ajax" targets="loginDiv"
notifyTopics="/ajaxloginCancel"/>
<s:submit action="showAjaxLoginCancelForm" value="Cancel"
onclick="form.onsubmit=null"/>
</s:form>
</div>
</s:div>
</body>
</html>
|
The "ajaxloginsuccess.jsp"
page displays the Login Success message (Welcome to Admin) when the user
is successfully authenticated.
Here is the code of "ajaxloginsuccess.jsp"
file:
<html>
<head>
<title>Login Success</title>
</head>
<body>
<p align="center"><font color="#000080" size="5">Login Successful !</font></p>
<h1> Welcome to <%=request.getParameter("username")%> </h1>
</body>
</html>
|
Output of the ajax login or cancel application:
When this application executes you get a login page as
shown:
If you leave the "Login name" and
"password" field empty in the login page then a message is displayed
as shown below:
If you leave the "Login name" field empty and
just fills the "Password" field in the login page then a message is
displayed as shown below:
If you fill the "Login name" field empty and
just leaves the "Password" field empty in the login page then a
message is displayed as shown below:
If you enter the wrong login name and password in the
login page then it displays a message as shown below:
After clicking the "Cancel" button, you get
the following:
When you enter the correct login name and password to
the login page:
Displays a success message as shown:
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Current Comments
5 comments so far (post your own) View All Comments Latest 10 Comments:Sir,
I use the same code as u given in the drop down.
But there is some problem in the internet exporer 6.
Hidden value is not access.
The code is working fine in the firefox.
Please give me any idea.
Varun Mittal
Posted by varun mittal on Wednesday, 06.4.08 @ 13:59pm | #62062
It doesn't missing code for showAjaxLoginForm, but this example doesn't work on Internet Explorer 6
Posted by idriz on Monday, 04.28.08 @ 19:39pm | #58073
Hi, this example works fine with firefox, but doesn't work with IE6
Posted by idriz on Monday, 04.28.08 @ 19:17pm | #58071
I tried to use your example. I am getting this error.
Expression parameters.parseContent is undefined on line 45, column 28 in template/ajax/head.ftl.
The problematic instruction:
----------
==> ${parameters.parseContent?string} [on line 45, column 26 in template/ajax/head.ftl]
----------
Posted by ajax on Wednesday, 03.26.08 @ 19:49pm | #54410
Hi,
In the above example showAjaxLoginForm code is missing. This ajax example is not working.
Posted by Javed on Tuesday, 02.5.08 @ 14:17pm | #47276