Thursday, 31 March 2011

Struts2 JQuery AjaxFORMS-2

AjaxForms5.jsp is a form example with validation. This example does not work in the struts2-jquery-showcase-2.5.0 version. There is a fix note from Herr Geppert on the internet about this. Some javascript has been changed at struts2-jquery-showcase-2.5.3 version. You have to add the utils.js and validation.js references also as seen below.

There is a difficulty about struts2-jquery-showcase-2.5.3. It does not run when compiled. The showcase related with the grid works though. So I copied the lib from the grid showcase of the same version. It worked.

The form activates the login action at the AJAX submit event. The AJAX submit event targets 'result' div with pulsate effect. There are two text fields, loginuser and loginpassword. These are handled at Login.java

Error processing can be done both in the Login.java or with xml validation.

AjaxForms5.jsp
--------------
<%--
form example from the AJAX command section
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
<script type="text/javascript" src="${pageContext.request.contextPath}/struts/utils.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/struts/xhtml/validation.js"></script>
</head>
<body>
<strong>Result Div :</strong>
<div id="result" class="result ui-widget-content ui-corner-all">Submit form bellow.</div>

<s:form id="formValidate" action="login" theme="xhtml">
<s:textfield
id="loginuser"
name="loginuser"
label="User"
required="true"
/>
<s:textfield
id="loginpassword"
name="loginpassword"
label="Password (test)"
required="true"
/>
<sj:submit
targets="result"
button="true"
validate="true"
effect="pulsate"
value="Submit"
indicator="indicator"
/>
<input type="hidden" id="struts.enableJSONValidation" name="struts.enableJSONValidation" value="true" />
</s:form>
</body>
</html>

Login.java
----------
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

package ARS;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import com.opensymphony.xwork2.ActionSupport;

public class Login extends ActionSupport {

private static final long serialVersionUID = 7968544374444173511L;
private static final Log log = LogFactory.getLog(Login.class);

private String loginuser;
private String loginpassword;
private String echo;

public String execute() throws Exception
{
echo = "Welcome " + loginuser;
log.info(echo);

return SUCCESS;
}

public String getEcho()
{
return echo;
}

public String getLoginuser()
{
return loginuser;
}

public void setLoginuser(String loginuser)
{
this.loginuser = loginuser;
}

public String getLoginpassword()
{
return loginpassword;
}

public void setLoginpassword(String loginpassword)
{
this.loginpassword = loginpassword;
}
// public void validate(){
//
// if ( loginuser.length() == 0 ){
// addFieldError( "loginuser", "loginuser is required." );
// }
//
// if ( loginpassword.length() == 0 ){
// addFieldError( "loginpassword", "loginpassword is required." );
// }
// }
}


Login-validation.xml
--------------------
<!DOCTYPE validators PUBLIC
"-//OpenSymphony Group//XWork Validator 1.0.2//EN"
"http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd">
<validators>
<validator type="requiredstring">
<param name="fieldname">loginuser</param>
<message>loginuser is required.</message>
</validator>
<validator type="requiredstring">
<param name="fieldname">loginpassword</param>
<message>loginpassword is required.</message>
</validator>
</validators>

AjaxForms6.jsp is a custom Validation example. It still uses some js substructure though. The example works without problem.

AjaxForms6.jsp
--------------
<%--
form example from the AJAX command section
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
<script type="text/javascript">
$(document).ready( function() {
$.subscribe('removeErrors', function(event,data) {
$('.errorLabel').html('').removeClass('errorLabel');
$('#formerrors').html('');
});
});

function customeValidation(form, errors) {

//List for errors
var list = $('#formerrors');

//Handle non field errors
if (errors.errors) {
$.each(errors.errors, function(index, value) {
list.append(''+value+'\n');
});
}

//Handle field errors
if (errors.fieldErrors) {
$.each(errors.fieldErrors, function(index, value) {
var elem = $('#'+index+'Error');
if(elem)
{
elem.html(value[0]);
elem.addClass('errorLabel');
}
});
}
}
</script>
</head>
<body>
<div id="result" class="result ui-widget-content ui-corner-all">Submit form bellow.</div>

<ul id="formerrors" class="errorMessage"></ul>
<s:form id="formValidateCustom" action="login" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form with Validation</legend>
<div class="type-text">
<label for="echo">User: <span id="loginuserError"></span></label>
<s:textfield
id="loginuser"
name="loginuser"
/>
</div>
<div class="type-text">
<label for="echo">Password: <span id="loginpasswordError"></span></label>
<s:textfield
id="loginpassword"
name="loginpassword"
/>
</div>
<div class="type-button">
<sj:submit
targets="result"
button="true"
validate="true"
validateFunction="customeValidation"
onBeforeTopics="removeErrors"
onSuccessTopics="removeErrors"
value="Submit"
indicator="indicator"
/>
</div>
</fieldset>
</s:form>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</body>
</html>
Posted by at