Ajax and Web Flow

[SSJ2Joseph]

After scouring the Internet and various forums, I'm very close to getting Ajax functionality working. The Ajax submit does kick off the "refreshSourceDocumentSection" transition, but the fragment is not re-rendered (the page doesn't even reload). Does anyone see anything wrong with the code? Am I missing something for this to work?

In my Spring configuration:

<bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
	<property name="viewClass">
		<value>
			org.springframework.web.servlet.view.tiles2.TilesView
		</value>
	</property>
</bean>
	
<bean id="ajaxViewResolver" class="org.springframework.js.ajax.AjaxUrlBasedViewResolver">
	<property name="viewClass" value="org.springframework.webflow.mvc.view.FlowAjaxTilesView"/>
</bean>

The pertinent tiles:

<definition name="editIssuePage" template="/WEB-INF/jsp/templates/soc_template.jsp">
		<put-attribute name="title" value="Issue"/>
		<put-attribute name="body" value="editIssueBody"/>
	</definition>
	
	<definition name="editIssueBody" template="/WEB-INF/flow/issue/editIssue.jsp">
		<put-attribute name="sourceDocumentSection" value="/WEB-INF/flow/issue/sourceDocumentSection.jsp"/>
	</definition>

The 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">
    
    <secured attributes="ROLE_ADMIN,ROLE_ANALYST" />
    <persistence-context/>
    
	<input name="id" required="false"/>
	
	<on-start>
		<evaluate expression="issueService.getIssue(id)" result="flowScope.issue"/>
	</on-start>
	
	<view-state id="editIssue" view="editIssuePage" model="issue">
		<on-entry>
			<set name="viewScope.userList" value="userService.getUserDropdownList()"/>
			<set name="viewScope.agencyList" value="loaService.getLoaDropdownList()"/>
			<set name="viewScope.priorityList" value="priorityService.getPriorityDropdownList()"/>
			<set name="viewScope.sourceDocumentList" value="sourceDocumentService.getSourceDocumentWithSectionsDropdownList()"/>
			<set name="viewScope.sourceDocumentSectionList" value="sourceDocumentSectionService.getSectionDropdownListBySourceDocumentId(issue.sourceDocumentSection.sourceDocument.id)"/>
		</on-entry>
		
		<transition on="refreshSourceDocumentSection">
			<set name="viewScope.sourceDocumentSectionList" value="sourceDocumentSectionService.getSectionDropdownListBySourceDocumentId(requestParameters.sourceDocument)"/>
			<render fragments="sourceDocumentSection"/>
		</transition>
		
		<transition on="cancel" to="cancelEdit"/>
		<transition on="submit" to="saveIssue"/>
	</view-state>
	
	<end-state id="saveIssue" commit="true" view="externalRedirect:contextRelative:dashboard/issueTable.htm"/>
	<end-state id="cancelEdit" commit="false" view="externalRedirect:contextRelative:dashboard/issueTable.htm"/>
</flow>

And finally, the pertinent section of the JSP:

<tr>
				<th>Source Document:</th>
				<td class="required">
					<select id="sourceDocument" name="sourceDocument">
						<c:forEach var="sd" items="${sourceDocumentList}">
							<option value="${sd.id}" <c:if test="${sd.id == issue.sourceDocumentSection.sourceDocument.id}">selected="selected"</c:if> >${sd.name}</option>
						</c:forEach>
					</select>
					<script type="text/javascript">
					    Spring.addDecoration(new Spring.AjaxEventDecoration({
					    	formId: "issueForm",
					        elementId: "sourceDocument",
					        event: "onchange",
					        params: { _eventId: "refreshSourceDocumentSection" }
					    }));
					</script>
				</td>
			</tr>
			<tr>
				<th>Source Document Section:</th>
				<td class="required">
					<div id="sourceDocumentSection">
						<tiles:insertAttribute name="sourceDocumentSection"/>
					</div>
				</td>
			</tr>

[SSJ2Joseph]

I removed the old UrlBasedViewResolver to see if that would help, so from here on that is no longer part of my configuration.

I did some debugging with Firebug. The Ajax request does give the proper response with the new select list, but the page does not get re-rendered with it. It seems like there needs to be some additional JavaScript to update the HTML on the page, but I've seen no mention of this in any of the documentation.

[SSJ2Joseph]

I've figured it out. The div with the I'd matching the tile name must be inside the tile JSP. What I find perplexing is that none of this is in the documentation. I had to read through the source code to figure out all the intricate steps required to get this working.

[boagerard]

Dear SSJ2Joseph,

I was wondering if you can give me some help. I have something similar to solve.

In my Spring configuration:

<beans:bean id="tilesViewResolver" class="org.springframework.js.ajax.AjaxUrlBasedViewResolver">  
    	<beans:property name="viewClass" value="org.springframework.webflow.mvc.view.FlowAjaxTilesView"/>    	
	</beans:bean>

The flow definition:

...
<beans:bean id="mvcViewFactoryCreator" class="org.springframework.webflow.mvc.builder.MvcViewFactoryCreator">
    	<beans:property name="defaultViewSuffix" value=".jsp" />
    	<beans:property name="viewResolvers" ref="tilesViewResolver"/>
	</beans:bean>
...

...

		<on-render>
	    	<evaluate expression="createNoticeOfSeizureFlowAction.getAddedManufacturers"/>
	    	<evaluate expression="createNoticeOfSeizureFlowAction.getBrands"/>
	    </on-render>
		<transition on="refreshBrands">
			<evaluate expression="createNoticeOfSeizureFlowAction.getBrands"/>
			<render fragments="brandDetailsBrand"/>
		</transition>
...

The JSP :

			<div id="country_data" style="display: block;">
				<form:label path="">
					<fmt:message key='country' bundle='${fieldLabels}'/>
				</form:label>
				<form:select cssClass="mandatory" path="" name="brandDetails.country" id="brandDetailsCountry" >
					<form:option value="" />
					<form:option value="N/A" />
					<apf:codeList name="countryNames" localised="true"/>
				</form:select>
				<script type="text/javascript">
					Spring.addDecoration(new Spring.AjaxEventDecoration({
						elementId : "brandDetailsCountry",
						event : "onchange",
						params : {
							_eventId : "refreshBrands"
						}
					}));
				</script>

				<form:errors path="" name="brandDetails.country.error" id="brandDetailsCountryError" cssClass="error" />
				<br />
			</div>

When I change the value of the select component, I get the following error :

Error: _4ac.url is undefined
Source file: http://localhost:7113/sma.web/springresources/dojo/dojo.js
Line: 16

If you have any clue, please do not hesitate to share!

Thanks!

[SSJ2Joseph]

boagerard,

Is that a JavaScript error? How are you including the Spring JavaScript files? Have you followed the instructions outlined in the documentation? Setting up the ResourceServlet is key.

http://static.springsource.org/sprin...ng-js-includes

[boagerard]

Yes, this is a javascript error. I included the Javascript files as described in the documentation. I checked in Firebug that all the resources are available.

[mrpack]

Try adding formId: "yourFormName" to ajax request

[boagerard]

After many tries, the tile is re-rendered. But I have now an exception with the message Neither BindingResult nor plain target object for bean name '' available as request attribute. I do not realize yet what I should add in order to have a correct bean name.

[mrpack]

Try changing the path="" on your form.

Mine looks something like this.....

<form:form modelAttribute="myFormBean" action="${flowExecutionUrl}" id="myFormBean">

[markfly]

I recently figured out how to do it thanks to webflow doc and the example provided.