Announcement Announcement Module
Collapse
No announcement yet.
dojo.xhrPost and Spring Web Flow Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • dojo.xhrPost and Spring Web Flow

    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>

  • #2
    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>

    Comment


    • #3
      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

      Comment


      • #4
        Thanks Jeremy !
        It worked well.

        Comment


        • #5
          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

          Comment


          • #6
            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

            Comment


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

              Comment


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

                Comment

                Working...
                X