Struts 2 + Spring 2 + JPA + AJAX （四)

john521

浏览: 622787 次
性别:
来自: 深圳

最近访客更多访客>>

svl

Peasant_Worker

lijun1191997

420664555

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Struts Ajax JPA Spring Dojo

The pages

We only have two pages, "index.jsp" and "list.jsp". "list.jsp" returns a table with a list of the persons on the database.We have this list on a different page because we are going to add some AJAX to spicy it up.

   1. Create a new file named "list.jsp" under /WebContent/pages/ and set its content to:

list.jsp

<%@ taglib prefix="s" uri="/struts-tags"%>

<p>Persons</p>
<s:if test="persons.size > 0">
<table>
<s:iterator value="persons">
<tr id="row_<s:property value="id"/>">
<td>
<s:property value="firstName" />
</td>
<td>
<s:property value="lastName" />
</td>
<td>
<s:url id="removeUrl" action="remove">
<s:param name="id" value="id" />
</s:url>
<s:a href="%{removeUrl}" theme="ajax" targets="persons">Remove</s:a>
<s:a id="a_%{id}" theme="ajax" notifyTopics="/edit">Edit</s:a>
</td>
</tr>
</s:iterator>
</table>
</s:if>

This is going to render a table with each row showing the first and last name of the person, a link to remove the person, and a link to edit. The remove link has the attribute "targets", set to "persons", which means that when the user clicks on it, an asynchronous request will be made to the "remove" action (as configured on struts.xml, "remove" points to the "remove" method in PersonAction), passing the person id as parameter.

When the edit link is clicked on, it will publish the "/edit" topic, which will trigger a javascript function to populate the fields.

   1. Create a new file named "index.jsp" under /WebContent and set its content to:

index.jsp

<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<s:head theme="ajax" debug="true"/>
<script type="text/javascript">
dojo.event.topic.subscribe("/save", function(data, type, request) {
    if(type == "load") {
dojo.byId("id").value = "";
dojo.byId("firstName").value = "";
dojo.byId("lastName").value = "";
}
});

dojo.event.topic.subscribe("/edit", function(data, type, request) {
    if(type == "before") {
var id = data.split("_")[1];

var tr = dojo.byId("row_"+id);
var tds = tr.getElementsByTagName("td");

dojo.byId("id").value = id;
dojo.byId("firstName").value = dojo.string.trim(dojo.dom.textContent(tds[0]));
dojo.byId("lastName").value = dojo.string.trim(dojo.dom.textContent(tds[1]));
}
});
</script>
</head>
<body>
    <s:url action="list" id="descrsUrl"/>

        <div style="width: 300px;border-style: solid">
        <div style="text-align: right;">
    <s:a theme="ajax" notifyTopics="/refresh">Refresh</s:a>
    </div>
    <s:div id="persons" theme="ajax" href="%{descrsUrl}" loadingText="Loading..." listenTopics="/refresh"/>
        </div>

        <br/>

<div style="width: 300px;border-style: solid">
<p>Person Data</p>
<s:form action="save" validate="true">
    <s:textfield id="id" name="person.id" cssStyle="display:none"/>
<s:textfield id="firstName" label="First Name" name="person.firstName"/>
<s:textfield id="lastName" label="Last Name" name="person.lastName"/>
<s:submit theme="ajax" targets="persons" notifyTopics="/save"/>
</s:form>
</div>
</body>
</html>

Look mom no page refresh!
The div "persons" will load its content asynchronously, and will show "Loading..." while while the request is on progress (you can use the "indicator" attribute for better progress feedback), you can force it to refresh clicking on the "Refresh" link. The "submit" button, will make an asynchronous request to the action "save" ("save" method on PersonAction), and will publish the topic "/save" to which we subscribed to, using "dojo.event.topic.subscribe", to clear the input fields.

分享到：