Thursday, 31 March 2011

Struts2 JQuery AjaxFORMS-3

There is a text area in this example. You first write something into the text area and then you push the submit button. The AJAX call copies this text into the result area.

1. The text area takes its default value from the
...
<s:url id="remoteurl" action="ajax1"/>
...

in the struts.xml:
...
<action name="ajax1">
<result>/Ajax1.jsp</result>
</action>
...

Ajax1.jsp:
----------
testARS
(it is composed of only a single word text)

The submit button targets:
...
<sj:submit
targets="result"
...
the result area is at the bottom:
...
<div id="result" class="result ui-widget-content ui-corner-all">
Enter some text in the Textarea above.
</div>
...

The submit button trigs the action echo:
...
<s:form id="formTextarea" action="echo" theme="simple" cssClass="yform">
...

in the struts.xml:
<action name="echo" class="ARS.Echo" method="execute">
<result name="success">/echo.jsp</result>
</action>
The code for the action echo lies in the echo.java, listed below under the
AjaxForms7.jsp's full code:

AjaxForms7.jsp
--------------
<%--
AJAX Textarea


--%>

<%@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>

<s:form id="formTextarea" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:url id="remoteurl" action="ajax1"/>
<sj:textarea
href="%{remoteurl}"
id="echo"
name="echo"
rows="10"
cols="80"
effect="highlight"
effectDuration="1500"
loadingText="Loading content of textarea ..."
/>
</div>
<div class="type-button">
<sj:submit
targets="result"
effect="slide"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
<img id="indicator"
src="images/indicator.gif"
alt="Loading..."
style="display:none"/>
</div>
</fieldset>
</s:form>
<strong>Result Div :</strong>
<div id="result" class="result ui-widget-content ui-corner-all">
Enter some text in the Textarea above.
</div>
</body>
</html>

Echo.java
---------
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;
}
}

The result of the ecgo action is directed to echo.jsp:

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

echo.jsp puts "Echo :" and then the value of the echo request variable
(echo field on the JSP). The output of the echo.jsp is targeted to the result field on the AjaxForms7.jsp

AjaxForms8.jsp has not much new, only the text area is resizable.

AjaxForms8.jsp
--------------
<%--
AJAX Text Area / Resizable
--%>

<%@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>
<s:form id="formTextareaResize" action="simpleecho" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<sj:textarea
resizable="true"
resizableGhost="true"
resizableHelper="ui-state-highlight"
id="echo"
name="echo"
rows="4"
cols="80"
onChangeTopics="submitThisForm"
/>
</div>
<div class="type-button">
<sj:submit
targets="result"
value="AJAX Submit"
indicator="indicator"
button="true"
listenTopics="submitThisForm"
/>
<img id="indicator"
src="images/indicator.gif"
alt="Loading..." style="display:none"/>
</div>
</fieldset>
</s:form>

<strong>Result Div :</strong>
<div id="result" class="result ui-widget-content ui-corner-all">
Enter some text in the Textarea above.
</div>
</body>
</html>

AjaxForms8.jsp has not much new, only this time it is a text field that is resizable.

AjaxForms9.jsp
--------------
<%--
AJAX Textfield / Resizable

--%>

<%@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>
<s:form id="formTextfieldResize" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:url id="urlsimpleecho" action="simpleecho">
<s:param name="echo">remote content for textfield!</s:param>
</s:url>
<sj:textfield
href="%{urlsimpleecho}"
resizable="true"
resizableGhost="true"
resizableHelper="ui-state-highlight"
resizableMaxHeight="30"
effect="blind"
effectDuration="1500"
effectOptions="{
mode: 'show'
}"
id="echo"
name="echo"
loadingText="Loading content of textfield ..."
/>
</div>
<div class="type-button">
<sj:submit
targets="result"
effect="highlight"
effectDuration="1500"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
<img id="indicator"
src="images/indicator.gif"
alt="Loading..."
style="display:none"/>
</div>
</fieldset>
</s:form>

<strong>Result Div :</strong>
<div id="result" class="result ui-widget-content ui-corner-all">
Enter some text in the Textarea above.
</div>
</body>
</html>
Posted by at