Ajax form submit using Spring Javascript

[walterdeane]

I have been trying to add the Ajax for form submission with a SWF application using tiles. I have tried two methods so far:

<a id="addPersonLink" href="portfolio-flow.htm?execution=${flowExecutionKey}&_eventId=ad dPerson">+ Person</a>
<script type="text/javascript">
Spring.addDecoration(new Spring.AjaxEventDecoration({
elementId: "addPersonLink",
event: "onclick",
formId:"addPersonForm",
params: {fragments:"productList"}
}));
</script>

and the direct call:

<input id="addBusiness" type="submit" name="_eventId_addBusiness" value="addBusiness" onclick="Spring.remoting.submitForm('addBusiness', 'addBusinessForm', { fragments:'clientList' }); return false;" />

Both methods don't use an ajax call of the clientList fragment but refresh the whole page. The first AjaxEventDecoration method with the formId attribute removed acts as an ajax call as expected but form items do not submit.

Is this expected behaviour? Does Spring Javascript not support Ajax calls on form submit?

[Marten Deinum]

Please use [ code][/code ] tags when using code.

Is this expected behaviour? Does Spring Javascript not support Ajax calls on form submit?

It does but I think not in the way you expect it to do. The fragment has to be part of the current page, else it doesn't work. I suggest that you take a look at the sample application, that shows a submit/link with a partial page refresh.

[walterdeane]

Sorry about the missing code tags. New to the forums and still working out how the posting works.

What do you mean the code needs to be in the current page? Currently I am testing a form submit where i add a person to an application. there is one tile that represents the added clients. In the same page there is a form with a first name and last name field and a submit like the ones i posted. I am trying to submit the form and update the personList fragment. If i trigger the transition with a link the personList updates if i add the formId all of the tiles updated.

I have looked at the swf-booking-mvc sample app and didn't see an example that posted the form that way. Is there a better example than that?

[Marten Deinum]

Well your link is never going to work, that is just a GET request, it doesn't do anything for you.

Also instead of a submit I think you need to use a normal button.

What do you mean the code needs to be in the current page?

I never mentioned CODE I mentioned a FRAGMENT. So the fragment you define must be part of the current page, i.e. in your tiles definition. Else it isn't going to work, but as you already mentioned it is part of your current page, so that shouldn't be the problem.

[walterdeane]

I have made a little progress in figuring out what is going on with this.

I am now able to submit a form and update a tile.

When just calling a transition in SWF with a get link:

    <a id="addPersonLink" href="portfolio-flow.htm?execution=${flowExecutionKey}&_eventId=addPerson">+ Person</a> 
<script type="text/javascript">
Spring.addDecoration(new Spring.AjaxEventDecoration({
elementId: "addPersonLink",
event: "onclick",
params: {fragments:"productList"}
}));

The fragments resolve as expected.

When submitting a form:

<input type="submit" id="addPerson" name="_eventId_addPerson" value="AddPerson"  onclick="Spring.remoting.submitForm('addPerson', 'addPersonForm', params: {fragments:"clientList"}); return false;" />

or

        <input type="submit" id="addPerson" name="_eventId_addPerson" value="AddPerson"   />
<script type="text/javascript">
    Spring.addDecoration(new Spring.AjaxEventDecoration({
        elementId: "addPerson",
        event: "onclick",
        formId:"addPersonForm",
        params: {fragments:"clientList"}
    }));
</script>

The tiles doesn't automatically update until I add <div id="clientList"></div> around the content.

The auto-resolving of the tiles seems to fail even though the server is sending back the update correctly. If I discover anything else that resolves this i will post later.

[pgibbons]

i have been trying to get this to work as well without much success.

what are you using on the server side? which controller, and what do your servlet and tiles configuration look like? if you don't mind sharing. thanks.

[walterdeane]

i have been trying to get this to work as well without much success.

what are you using on the server side? which controller, and what do your servlet and tiles configuration look like? if you don't mind sharing. thanks.

Not sure how far along you are so I'll give you as much as i can. I haven't included any of the web flow stuff as it is pretty standard. Let me know if this is enough or if you still have issues. My last post has a little explanation about how to call the ajax from a form. the standard link stuff was fairly solid. Good luck!

in the web.xml you need to add the ResourceServlet

    
<servlet>
        <servlet-name>Resource Servlet</servlet-name>
        <servlet-class>org.springframework.js.resource.ResourceServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Resource Servlet</servlet-name>
        <url-pattern>/resources/*</url-pattern>
    </servlet-mapping>

Along with that in your tile page that you are triggering the ajax from add:

    <script type="text/javascript" src='<c:url value="/resources/dojo/dojo.js" />'></script>
    <script type="text/javascript" src='<c:url value="/resources/spring/Spring.js" />'></script>
    <script type="text/javascript" src='<c:url value="/resources/spring/Spring-Dojo.js" />'></script>

in your application config add:

<flow:flow-registry id="flowRegistry" flow-builder-services="flowBuilderServices" >
        <flow:flow-location path="/WEB-INF/flows/application-flow.xml"/>
    </flow:flow-registry>
    <flow:flow-builder-services id="flowBuilderServices" view-factory-creator="viewFactoryCreator"/>
    <bean id="viewFactoryCreator" class="org.springframework.webflow.mvc.builder.MvcViewFactoryCreator">
        <property name="viewResolvers">
            <list>
                <ref bean="tilesAjaxViewResolver"/>
            </list>
        </property>
    </bean>
    <bean id="tilesAjaxViewResolver" class="org.springframework.js.ajax.AjaxUrlBasedViewResolver">
        <property name="viewClass" value="org.springframework.webflow.mvc.view.FlowAjaxTilesView">
        </property>
    </bean>
    <bean id="mvcViewFactoryCreator" class="org.springframework.webflow.mvc.builder.MvcViewFactoryCreator">
        <property name="viewResolvers" ref="tilesAjaxViewResolver" />         
    </bean>
   <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
        <property name="definitions">
            <list>
                <value>/WEB-INF/layouts/layouts.xml</value>
                <value>/WEB-INF/jsps/views.xml</value>
            </list>
        </property>
    </bean>

[pgibbons]

Hey thanks for posting your information. I have a slightly different setup, as I'm not using Web Flow.

Below is my set up, I have a decoration as such:

<a id="searchResultsLink" href="search.html">Search AJAX Test</a>
<script type="text/javascript">
Spring.addDecoration(new Spring.AjaxEventDecoration({
					        elementId: "searchResultsLink",
					        event: "onclick",      
					        params: { fragments: "copyright" }
					    }));
</script>

this is on my "home" page. on the home page i have a tile fragment called "copyright" as well.

"search.html" is setup in my servlet xml as such:

<bean name="/search.html" class="com.controller.SearchController"/>

corresponding to:

	public ModelAndView handleRequest(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {


		ModelAndView modelAndView = new ModelAndView("search.results");


		return modelAndView;
	}

I have "search.results" tile setup as well. It basically points to a jsp that only has static text now (such as "this is search results page"). Is this the right way to setup a controller for an Ajax call?


When I click on the link setup above (decoration at the beginning of this post), nothing seems to happen on the UI. The controller is being invoked (I tried putting a system out to verify). But nothing on the UI.

If I replace "search.html" with a non existing link, I get a pop up with a 404 error.
If I replace "search.html" with something like "http www cnn dot com/", I am redirected to cnn.com. (Note the quoted link above is a valid cnn url, I had to break it up, because I am not allowed to post links.)

What I expected to happen is that the "copyright" tile fragment to be replaced with the html returned from cnn.com.

Please let me know if anyone sees something that I am doing wrong. I am new to Spring as well as Spring JS. Thanks in advance.

[pgibbons]

Ok, it appears to be working now:

<a id="searchResultsLink" href="search.html">Search AJAX Test</a>
<script type="text/javascript">
Spring.addDecoration(new Spring.AjaxEventDecoration({
					        elementId: "searchResultsLink",
					        event: "onclick",      
					        params: { fragments: "copyright" }
					    }));
</script>

It seems the fragments "copyright" had to the "id" of a "div" and NOT the name of the tile fragment.

This is contrary to what I've read in other threads in this forum. I got the impression that the fragments were tiles. But it seems div id is working, but not tile name.

It works. But can anyone explain? Where is the documentation (detailed) for Spring JS, I wasn't able to locate it. Thanks.

[walterdeane]

Ok, it appears to be working now:

<a id="searchResultsLink" href="search.html">Search AJAX Test</a>
<script type="text/javascript">
Spring.addDecoration(new Spring.AjaxEventDecoration({
					        elementId: "searchResultsLink",
					        event: "onclick",      
					        params: { fragments: "copyright" }
					    }));
</script>

It seems the fragments "copyright" had to the "id" of a "div" and NOT the name of the tile fragment.

This is contrary to what I've read in other threads in this forum. I got the impression that the fragments were tiles. But it seems div id is working, but not tile name.

It works. But can anyone explain? Where is the documentation (detailed) for Spring JS, I wasn't able to locate it. Thanks.

Yeah that is the problem i was talking about in my previous entry.

I havent had a chance to work that out yet. I am a bit flat out without it but am going to try and debug with the uncompressed js and see if i can figure it out. Unfortunately if I dont figure it out by friday it will have to wait a week because i am going on holidays. If i get a chance to work through it i will post again. You only need the div with id if you are using a form submit not a regular get request on a link.