Dojo decorated inputs disappeared after partial page rendering

[digz6666]

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:

<?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):

<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:

http://www.mediafire.com/?izj5czjyojt

Here's the screenshots of my webapp:
1. It's in show state:

2. I changed the country combobox and ajax event fired. 1st textfield disappeared.

3. After sevelal changes all the textfields disappeared except undecorated textfield.


Oh I forgot the include database script.
Get it from here.
I'm using mysql 5.

[digz6666]

It seems validating form when I change country select, printed message that says required fields are missing.

Field error in object 'publicRegisterForm' on field 'password': rejected value [null]; codes []; arguments []; default message [typeMismatch on password]
Field error in object 'publicRegisterForm' on field 'email': rejected value [null]; codes []; arguments []; default message [typeMismatch on email], currentFormObject=com.eon.ibuy.persistence.Systemuser@19a19fd, flashScope=map['webflowViewActionStateHolder' -> [ViewActionStateHolder@10285d8 eventId = 'fetchZones', mappingResults = Mapping Results = [[TargetAccessError@a53948 mapping = parameter:'password' -> password, code = 'typeMismatch', error = true, errorCause = org.springframework.binding.expression.ValueCoercionException: Value could not be converted to target class; is a suitable type converter registered?, originalValue = array<String>['', ''], mappedValue = [null]], [Success@153d05b mapping = parameter:'zone' -> zone, code = 'success', error = false, originalValue = '', mappedValue = ''], [TargetAccessError@194363b mapping = parameter:'country_id' -> country_id, code = 'propertyNotFound', error = true, errorCause = org.springframework.binding.expression.PropertyNotFoundException: Property not found, originalValue = '', mappedValue = [null]], [TargetAccessError@17470d0 mapping = parameter:'ajaxSource' -> ajaxSource, code = 'propertyNotFound', error = true, errorCause = org.springframework.binding.expression.PropertyNotFoundException: Property not found, originalValue = 'country', mappedValue = [null]], [Success@19a8942 mapping = parameter:'userId' -> userId, code = 'success', error = false, originalValue = '', mappedValue = ''], [TargetAccessError@a96eba mapping = null -> eventId_check, code = 'propertyNotFound', error = true, errorCause = org.springframework.binding.expression.PropertyNotFoundException: Property not found, originalValue = [null], mappedValue = [null]], [Success@1a4a1c9 mapping = parameter:'firstName' -> firstName, code = 'success', error = false, originalValue = '', mappedValue = ''], [Success@1799a1e mapping = parameter:'lastName' -> lastName, code = 'success', error = false, originalValue = '', mappedValue = ''], [Success@7541f8 mapping = parameter:'country' -> country, code = 'success', error = false, originalValue = 'United States', mappedValue = 'United States'], [TargetAccessError@3e3c83 mapping = parameter:'email' -> email, code = 'typeMismatch', error = true, errorCause = org.springframework.binding.expression.ValueCoercionException: Value could not be converted to target class; is a suitable type converter registered?, originalValue = array<String>['', ''], mappedValue = [null]], [Success@1f6dc61 mapping = parameter:'middleName' -> middleName, code = 'success', error = false, originalValue = '', mappedValue = ''], [TargetAccessError@1fe9999 mapping = null -> eventId, code = 'propertyNotFound', error = true, errorCause = org.springframework.binding.expression.PropertyNotFoundException: Property not found, originalValue = [null], mappedValue = [null]], [TargetAccessError@164d75 mapping = parameter:'execution' -> execution, code = 'propertyNotFound', error = true, errorCause = org.springframework.binding.expression.PropertyNotFoundException: Property not found, originalValue = 'e14s2', mappedValue = [null]]]]], flowExecutionUrl=/ibuy/register.ibuy?execution=e14s2, flowRequestContext=[RequestControlContextImpl@205df9 externalContext = org.springframework.webflow.mvc.servlet.MvcExternalContext@1ebf5c, currentEvent = [null], requestScope = map[[empty]], attributes = map[[empty]], messageContext = [DefaultMessageContext@a14c53 sourceMessages = map[[null] -> list[[empty]], 'password' -> list[[Message@d9c6e2 source = 'password', severity = Error, text = 'typeMismatch on password']], 'email' -> list[[Message@6f513 source = 'email', severity = Error, text = 'typeMismatch on email']]]], flowExecution = [FlowExecutionImpl@f9aa66 flow = 'register', flowSessions = list[[FlowSessionImpl@1224b90 flow = 'register', state = 'show', scope = map['viewScope' -> map[[empty]], 'currentFormObject' -> com.eon.ibuy.persistence.Systemuser@19a19fd, 'systemuser' -> com.eon.ibuy.persistence.Systemuser@19a19fd, 'countries' -> list[com.eon.ibuy.persistence.Country@8edb84, com.eon.ibuy.persistence.Country@edf1de]]]]]], flowExecutionKey=e14s2, systemuser=com.eon.ibuy.persistence.Systemuser@19a19fd, countries=[com.eon.ibuy.persistence.Country@8edb84, com.eon.ibuy.persistence.Country@edf1de], currentUser=null}]

Also it prints following warning:

WARN : org.springframework.webflow.mvc.view.FlowAjaxTilesView - An Ajax request was detected, but no fragments were specified to be re-rendered.  Falling back to full page render.

When I typed required fields and changed country select, above messages are not printed.

I've set validate parameter to false but it tries to validate.

	<view-state id="show" model="publicRegisterForm" view="public/account/register" redirect="false" popup="false">
		<transition on="check" to="checkRegistration"/>
		<transition on="fetchZones" validate="false">
			<evaluate expression="ZoneDAO.findByProperty('country.countryId', requestScope.country_id)" result="flowScope.zones"/>
			<render fragments="body, header"/>
		</transition>
	</view-state>

[digz6666]

I've removed the following line from my register.jsp page:

<input type="hidden" name="_eventId_check" value="check"/>

as following exception:

DEBUG: org.springframework.binding.mapping.impl.DefaultMapping - Adding mapping result [TargetAccessError@6fb3d6 mapping = null -> eventId, code = 'propertyNotFound', error = true, errorCause = org.springframework.binding.expression.PropertyNotFoundException: Property not found, originalValue = [null], mappedValue = [null]]

So at last this exception have never thrown.

And following mapping errors left to reproduce:

DEBUG: org.springframework.binding.mapping.impl.DefaultMapping - Adding mapping result [TargetAccessError@1d35bf2 mapping = parameter:'ajaxSource' -> ajaxSource, code = 'propertyNotFound', error = true, errorCause = org.springframework.binding.expression.PropertyNotFoundException: Property not found, originalValue = 'country', mappedValue = [null]]
DEBUG: org.springframework.binding.mapping.impl.DefaultMapping - Adding mapping result [TargetAccessError@16181be mapping = parameter:'country_id' -> country_id, code = 'propertyNotFound', error = true, errorCause = org.springframework.binding.expression.PropertyNotFoundException: Property not found, originalValue = '', mappedValue = [null]]
DEBUG: org.springframework.binding.mapping.impl.DefaultMapping - Adding mapping result [TargetAccessError@1602bbc mapping = parameter:'execution' -> execution, code = 'propertyNotFound', error = true, errorCause = org.springframework.binding.expression.PropertyNotFoundException: Property not found, originalValue = 'e3s2', mappedValue = [null]]

String country_id > Country country binding throws exception, so how can I bind?

Why ajaxSource, execution mapping throws exception?
Should I bind to model that extends FormAction or any other suitable class?
By the way I've highlighted important code parts in red.




Also it's not rendering tile that defined in tiles defintion file. It says it's rendering public/account/register view. But not updating dates on header and body section.

DEBUG: org.springframework.webflow.engine.ViewState - Rendering + [ServletMvcView@10c29fe view = org.springframework.webflow.mvc.view.FlowAjaxTilesView: name 'public/account/register'; URL [public/account/register]]

Here's my flow transition config part:

<transition on="fetchZones" validate="false">
	<evaluate expression="ZoneDAO.findAll()" result="flowScope.zones"/>
	<render fragments="header"/>
</transition>

[digz6666]

I've used jquery tabs instead dojo and working fine.

It seems issue with dojo. dojo.parse not called after partial page render.

[lostman]

I've got a similar problem.

I have a non-Ajax form (using dojo) which works fine uploading a file.

Trying to convert it to Ajax I found a problem. Using debbuger, I have seen that file were not submited, otherwise the strings from the form done. What's the problem?

This is a sample code

<form:form id="form" modelAttribute="formPublicacion" method="post" enctype="multipart/form-data">
<input name="nombreFichero" type="text"/>
<input name="file" type="file"/>

<button type="submit" id="formUploadAnexoAceptar" style="float:right;margin-top:20px;">
<spring:message code="acciones.comun.aceptar"/>
</button>
</form:form>


<script type="text/javascript">
Spring.addDecoration(
new Spring.AjaxEventDecoration({
elementId: "formUploadAnexoAceptar",
formId: "formPublicacion",
event: "onclick",
params:{_eventId:"insertarAnexo"}
}));
</script>

[spsaran]

I faced same problem and fixed. I have moved the tundra.css and other Dojo .js inside <head> section and It is working.

[cleclefl]

Anyone got a clear solution for this?
Based on this thread (https://jira.springframework.org/browse/SWF-1267), when Spring-Dojo.js replace the current node with the new one, there should be some kind of re-parsing of nodes in dojo, but nothing is done (fault of Spring-Js or fault of Dojo ?).
Currently, I face 2 solutions:
1) call my <input> with timestamped names (ex: submit+$now)
2) destroy my dijit elements onsubmit (onsubmit, foreach ... dijit.byId(..).destroy).

This isn't comfortable at all...

[digz6666]

I faced same problem and fixed. I have moved the tundra.css and other Dojo .js inside <head> section and It is working.

All my css and js in head section, but still had an issue.

Anyone got a clear solution for this?
Based on this thread (https://jira.springframework.org/browse/SWF-1267), when Spring-Dojo.js replace the current node with the new one, there should be some kind of re-parsing of nodes in dojo, but nothing is done (fault of Spring-Js or fault of Dojo ?).
Currently, I face 2 solutions:
1) call my <input> with timestamped names (ex: submit+$now)
2) destroy my dijit elements onsubmit (onsubmit, foreach ... dijit.byId(..).destroy).

This isn't comfortable at all...

Yep, dojo parse not called on ajax load.

[tonytaotao]

what you can do is:

1. remove registered control

if(dijit.byId('control') != null){
dijit.byId('control').destroyRecursive();
}

2. recall parser

dojo.parser.parse();