Dojo decorated inputs disappeared after partial page rendering
Hi all, I'm writing user registration form using spring web flow and dojo.
There are following fields:
1. User ID
2. 2 passwords
3. 2 emails
4. First name
5. Middle name
6. Last name
7. Country (select)
8. Zone (select)
9. City (not added yet)
10. District (not added yet)
11. Address (not added yet)
When page loads, all the the countries retrieved from database and showed in country select.
When country select's onchange event fires, all the zones in selected country must be retrieved from database and showed in zone select.
But when onchange event fires, all the dojo decorated inputs disappears.
I've checked that it successfully called DAO method ZoneDAO.findByProperty, despite have some minor issue (country_id parameter was null or I've made a mistake how to access request parameter).
How can I resolve this?
Here's the register.xml flow definition:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<flow xmlns="http://www.springframework.org/schema/webflow"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/webflow
http://www.springframework.org/schema/webflow/spring-webflow-2.0.xsd">
<view-state id="agreement" view="public/account/terms" redirect="false" popup="false">
<transition on="agree" to="setup"/>
</view-state>
<action-state id="setup">
<evaluate expression="publicRegisterFormAction.setupForm(flowRequestContext)">
</evaluate>
<evaluate expression="publicRegisterFormAction.initForm(flowRequestContext)">
<attribute name="name" value="init"/>
<attribute name="operation" value="0"/>
</evaluate>
<transition on="success" to="fetchCountries"/>
</action-state>
<action-state id="fetchCountries">
<evaluate expression="CountryDAO.findAll()" result="flowScope.countries"/>
<transition on="success" to="show"/>
</action-state>
<view-state id="show" model="publicRegisterForm" view="public/account/register" redirect="false" popup="false">
<transition on="checkRegister" to="checkRegister" validate="false"/>
<transition on="fetchZones" validate="false">
<evaluate expression="ZoneDAO.findAll()" result="flowScope.zones"/>
<render fragments="body"/>
</transition>
</view-state>
<action-state id="checkRegister">
<evaluate expression="publicRegisterFormAction.bindAndValidate(flowRequestContext)"/>
<transition on="success" to="processRegister"/>
</action-state>
<action-state id="processRegister">
<evaluate expression="SystemUserDAO.save(publicRegisterForm)"/>
</action-state>
</flow>
Here's the register.jsp file part. (I'm using tiles 2):
Code:
<table style="width: 400px;">
<tr>
<td>Country</td>
<td>
<form:select id="country" path="country">
<c:forEach var="cur_country" items="${countries}">
<form:option id="${cur_country.countryId}" value="${cur_country.countryName}"></form:option>
</c:forEach>
</form:select>
<script type="text/javascript">
Spring.addDecoration(new Spring.AjaxEventDecoration({
elementId: "country",
formId: "publicRegisterForm",
event: "onchange",
params: { _eventId: "fetchZones", country_id: dojo.byId('country').value }
}));
</script>
</td>
</tr>
<tr>
<td>Zone</td>
<td>
<div id="zoneDiv">
<form:select id="zone" path="zone">
<c:forEach var="cur_zone" items="${zones}">
<form:option id="${cur_zone.zoneId}" value="${cur_zone.zoneName}"></form:option>
</c:forEach>
</form:select>
</div>
</td>
</tr>
<tr>
<td>City</td>
<td>
</td>
</tr>
<tr>
<td>District</td>
<td></td>
</tr>
<tr>
<td>Street</td>
<td></td>
</tr>
<tr>
<td>Address</td>
<td></td>
</tr>
</table>
In case for quick testing I've uploaded the war file with java source files:
Code:
http://www.mediafire.com/?izj5czjyojt
Here's the screenshots of my webapp:
1. It's in show state:
http://img17.imageshack.us/img17/2849/scr1g.th.jpg
2. I changed the country combobox and ajax event fired. 1st textfield disappeared.
http://img17.imageshack.us/img17/5113/scr2qgq.th.jpg
3. After sevelal changes all the textfields disappeared except undecorated textfield.
http://img17.imageshack.us/img17/6568/scr3c.th.jpg
Oh I forgot the include database script.
Get it from here.
I'm using mysql 5.
