Friday, 25 March 2011

Struts2 - Jquery AJAX tutorial2

AjaxTest3.jsp is an example of form AJAX action.
AjaxTest3.jsp
-------------
<%--
Document : testAJAX
Created on : 15.Mar.2011, 20:08:02
Author : Ali Riza SARAL
--%>

<%@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/>
</head>
<body>
<div id="formResult">formResult</div>
<s:form id="form" action="echo" theme="xhtml">
Echo: <s:textfield id="echo" name="echo" value="Hello World!!!"/><br/>
</s:form>

<sj:a
id="ajaxformlink"
formIds="form"
targets="formResult"
indicator="indicator"
button="true"
buttonIcon="ui-icon-gear"
>
Submit form here
</sj:a>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</body>
</html>

The action echo is trigged when the form is submitted.
The echo action is defined at the struts.xml as

...
<action name="echo" class="ARS.Echo" method="execute">
<result name="success">/echo.jsp</result>
</action>
...

It's source is at the ARS lib's echo.jsp member.
/ARS/echo.jsp
-------------
package ARS;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

import com.opensymphony.xwork2.ActionSupport;

public class Echo extends ActionSupport {

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

private String echo;
private boolean escape = true;

public String execute() throws Exception
{

log.info("Echo : " + echo);

return SUCCESS;
}

public String getEcho()
{
return echo;
}

public void setEcho(String echo)
{
this.echo = echo;
}

public boolean isEscape()
{
return escape;
}

public void setEscape(boolean escape)
{
this.escape = escape;
}
}

Now, let's concentrate on the form of AjaxTest3.jsp:
...
<s:form id="form" action="echo" theme="xhtml">
Echo: <s:textfield id="echo" name="echo" value="Hello World!!!"/><br/>
</s:form>
...

This form has a textfield named echo with a default value.
If we look at the ARS.echo once again:

public class Echo extends ActionSupport {
...
private String echo;
private boolean escape = true;

public String execute() throws Exception
{

log.info("Echo : " + echo);

return SUCCESS;
}
...

The execute method takes this default value and adds "Echo :" to its
front and uses its setter and getters to change this value.

struts.xml has:
...
<action name="echo" class="ARS.Echo" method="execute">
<result name="success">/echo.jsp</result>
</action>
It returns echo.jsp...

echo.jsp
--------
<%@ taglib prefix="s" uri="/struts-tags"%>
<p>Echo : <s:property value="echo" escape="%{escape}"/></p>

Now, it is clearer how it takes the echo and returns it back to
AjaxTest3 which targets this output to
...
targets="formResult"
...

namely the div named formResult.

AjaxTest4.jsp uses AJAX calls with events. The events are triggered
by the:
...
onClickTopics="beforeLink"
onCompleteTopics="completeLink"
onErrorTopics="errorStateLink"
...
handlers.

The events are defined in the subscribing section in the
script part at the beginning. Namely:
...
<script type="text/javascript" charset="utf-8">
//$(document).ready(function() {
$.subscribe('beforeLink', function(event,data) {
alert('Before request ');
$('#result').html('Loading ...');
});
...

I have added file-does-not-exist1.html so that you can rename
and play with it.
The complete code follows:

AjaxTest4.jsp
-------------
<%--
Document : testAJAX
Created on : 15.Mar.2011, 20:08:02
Author : Ali Riza SARAL
--%>

<%@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" charset="utf-8">
//$(document).ready(function() {
$.subscribe('beforeLink', function(event,data) {
alert('Before request ');
$('#result').html('Loading ...');
});
$.subscribe('completeLink', function(event,data) {
$('#result').append('<br/><br/><strong>Completed request '+event.originalEvent.request.statusText+' completed with '+event.originalEvent.status+ '.</strong><br/>Status: '+event.originalEvent.request.status);
});
$.subscribe('errorStateLink', function(event,data) {
$('#result').html('<br/><br/><strong>Error request '+event.originalEvent.request.statusText+' completed with '+event.originalEvent.status+ '.</strong><br/>Status: '+event.originalEvent.request.status);
});
//});
</script>
</head>
<body>
<s:url id="ajax" value="/ajax1.action"/>
<div id="result" name="result">result</div>
<div id="result2" name="result2">result</div>
<sj:a
id="ajaxlink"
href="%{ajax}"
indicator="indicator"
targets="result"
onClickTopics="beforeLink"
onCompleteTopics="completeLink"
effect="pulsate"
button="true"
buttonIcon="ui-icon-gear"
>
Run AJAX Action
</sj:a>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
<br/>
<br/>
<sj:a
id="ajaxlink2"
href="file-does-not-exist.html"
indicator="indicator2"
targets="result"
onClickTopics="beforeLink"
onCompleteTopics="completeLink"
onErrorTopics="errorStateLink"
effect="pulsate"
effectDuration="1500"
button="true"
buttonIcon="ui-icon-gear"
>
Run AJAX Error Action
</sj:a>
<img id="indicator2" src="images/indicator.gif" alt="Loading..." style="display:none"/>

</body>
</html>

I added bounce effect to the highlight effect example for economy.
The AJAX function's effects can be used for highlight:
...
effect="highlight"
effectOptions="{ color : '#222222' }"
effectDuration="3000"
...

and bounce:
...
effect="bounce"
effectDuration="2200"
...

The full code follows:

AjaxTest5.jsp
-------------
<%--
Document : testAJAX
Created on : 15.Mar.2011, 20:08:02
Author : Ali Riza SARAL
--%>

<%@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/>
</head>
<body>
<div id="result">formResult</div>
<s:url id="ajax" value="/ajax1.action"/>

<sj:a
id="ajaxlink"
href="%{ajax}"
targets="result"
effect="highlight"
effectOptions="{ color : '#222222' }"
effectDuration="3000"
button="true"
buttonIcon="ui-icon-gear"
>
Run AJAX Action
</sj:a>
<s:url id="ajax2" value="/ajax1.action"/>

<sj:a
id="ajaxlink2"
href="%{ajax}"
indicator="indicator"
targets="result"
effect="bounce"
effectDuration="2200"
button="true"
buttonIcon="ui-icon-gear"
>
Run AJAX Action
</sj:a>

</body>
</html>
Posted by at