dojo.xhrPost and Spring Web Flow

**burnz007** · Mar 14th, 2008, 02:51 PM

Hi all,
I'm trying to use dojo.xhrPost to submit a form on the radio button click event and I'm expecting the flow controller to return the next page in the flow in the specified div... however it doesn't seem to be working. It just returns the page I had just submitted... it seems like either the xhrPost isn't sending the form along with it... or swf isn't recognizing that it's there.
Anyone know how to do something like this??
Thanks,
Mike

Here's the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title></title>
	<%@ include file="/WEB-INF/jsp/common/electionStyles.jsp"%>
	<script src="/shares/scripts/js/dojo/dojo.js" type="text/javascript"></script>
	<script type="text/javascript">		
		function init(){
 			myForm = dojo.byId('form');
    		submitEvent = dojo.connect(myForm, 'submit', 'handleSubmit');
		}
	</script>
	<script type="text/javascript">
		function handleSubmit(evt) {
			dojo.stopEvent(evt);
			dojo.xhrPost( {
				url: myForm.action,
				handleAs: "text",
				load: function(response){
               		dojo.byId('myDiv').innerHTML = response;
                	return response;
           		 	},
           		form: "form",
           		error: function(response, ioArgs) { 
          			console.error("HTTP status code: ", ioArgs.xhr.status); 
          			return response; 
          		} 				
			});
		}
	</script>
	<script type="text/javascript">
		dojo.addOnLoad(init);
	</script>
</head>
<body>
<form:form commandName="form" method="post">
	<input type="hidden" name="_flowExecutionKey"
		value="${flowExecutionKey}" />
	<form:errors path="*" cssClass="errorText" />
	<div id="mainDiv">
	<table>
		<tr>
			<th>Select Subscription Details</th>
		</tr>
		<tr>
			<td>Account Type</td>
			<td>
				<c:forEach items="${customAccountTypes}" var="accountType">
					<p class="indent data">
						<spring:bind path="confirmationDetails.customAccountType">
							<input 
								type="radio" 
								name="confirmationDetails.customAccountType"
								value="${accountType.id}"
								onclick="document.getElementById('next').click();"
								<c:if test='${accountType == status.value}'>checked="checked"</c:if> 
							/>
							<c:out value="${accountType.name}"></c:out>
						</spring:bind>							
					</p>
				</c:forEach>
			</td>
		</tr>
	</table>
	</div>
	<div id="myDiv">
	</div>
	
	<input id="next" type="submit" name="_eventId_next" value="Next" style="visibility:hidden"/>


</form:form>
</body>
</html>

**burnz007** · Mar 14th, 2008, 02:58 PM

BTW, Here's the relevant view states from the flow.xml:

Code:

	<view-state id="subscriptionDetails"
		view="content/offerElection/subscriptionDetails">
		<render-actions>
			<action bean="offerElectionFormAction"
				method="setupForm" />
		</render-actions>
		<transition on="next" to="ajaxTest">
			<action bean="offerElectionFormAction"
				method="bind" />
		</transition>
	</view-state>
	
	<view-state id="ajaxTest" view="content/offerElection/ajaxTest">
		<render-actions>
			<action bean="offerElectionFormAction"
				method="setupForm" />
		</render-actions>
		<transition on="previous" to="subscriptionDetails" />
	</view-state>

**jeremyg484** · Mar 14th, 2008, 03:31 PM

The problem looks to be that you aren't sending along the event. Since the button click is not actually causing the browser to do a traditional submit of the form, the _eventId_next parameter will not be included in the request. I would suggest not using the hidden button at all in this scenario and instead use dojo.connect to intercept the click event of your radio button. When you use dojo.xhrPost, you can add extra data to the post through providing a 'content' parameter to xhrPost, so in this case you would populate 'content' with the _eventId parameter value.

For example, you would create an object like this:

Code:

var content = new Object();
content["_eventId"] = "next";

to pass into xhrPost.

I would highly recommend using the Firebug plugin for Firefox to debug this sort of thing as it allows you to inspect the content being posted to the server, thus you will be able to see whether _eventId is included or not.

-Jeremy

**burnz007** · Mar 17th, 2008, 04:13 PM

Thanks Jeremy !
It worked well.

**burnz007** · Mar 18th, 2008, 02:44 PM

Thanks again Jeremy ! I have another question you may be able to help with.
When I got this to work using your solution, I was still using the hidden button's onclick event to submit the form. Since the number of radio buttons is dynamic (one for each accountType in the collection), they don't have an "id" attribute for me to reference:

Code:

<c:forEach items="${customAccountTypes}" var="accountType">
	<p class="indent data">
		<spring:bind path="confirmationDetails.customAccountType">
			<input 
				type="radio" 
				name="confirmationDetails.customAccountType"
				value="${accountType.id}"
				onclick="document.getElementById('next').click();"
				<c:if test='${accountType == status.value}'>checked="checked"</c:if> 
			/>
			<c:out value="${accountType.name}"></c:out>
		</spring:bind>							
	</p>
</c:forEach>

Is there a way to do a dojo.connect() to these radio buttons without first using dojo.byId() to get a reference to them ?
Thanks,
Mike

**jeremyg484** · Mar 19th, 2008, 08:46 AM

Yes, definitely...take a look at the dojo.query api:

http://dojotoolkit.org/book/dojo-boo...des-dojo-query

So I would suggest a dojo.onload callback that selects the radio button nodes you are interested in using dojo.query and applies the event handler to all of them.

- Jeremy

**spasham** · Jul 17th, 2008, 08:47 PM

Can any one post how to send the response back to XHRPost:load as a text from a spring webflow event

**shiv12** · Feb 11th, 2009, 02:35 AM

Can anyone help me in how to send response to page after ajax request...
and how to add status values in the response...

Thread: dojo.xhrPost and Spring Web Flow

Thread Tools

Display

dojo.xhrPost and Spring Web Flow

Posting Permissions