Ajax call to a method in flow handler - Spring web flow 2.1.1

Question

Hi,

I have a problem with performing Ajax call inside of flow (created by spring web flow) on a flow handler. Assuming that we are in step 2 of this flow and I would like to call a method on server which will add a new object to a list displayed on a page. This method call should be performed by flow handler and without refresh the whole list should be redisplayed on a page and new object should appear there.

In simpler words I would like to do a partial submit with call to a method in flow handler. But for now I could do that only with the whole submitt of a form with refresh.

I have tried: - Spring.remoting.submitForm(...)

• Spring.addDecoration(new Spring.AjaxEventDecoration({...})

• DWR dojo request ...

My environment: - Spring-webflow - 2.1.1.RELEASE

• Spring-webmvc - 3.0.3.RELEASE

• Spring - 3.0.3.RELEASE

• Tiles - 2.2.1

• Velocity - 1.6.4

I hope that someone can help with this problem.

Regards

Marek Dominiak

Answer 1

I'm doing this exact thing using jQuery.

In my main page where the tiles are defined, I have:

<script type="text/javascript" src="/path/to/jquery/jquery-1.4.2.min.js" />

Then, in the places where I want to call a page fragment I have:

    <script type="text/javascript"><![CDATA[
      $(document).ready(function() {

          $("#addNewFragment").click(function() {
              $.get("/app/fragments/target.page",function(data){$("#addFragmentLocation").before(data);});
          });
      });
    ]]></script>

And lower in the same page where I want the fragment to appear, I have:

<span id="addFragmentLocation" />

And I have some element with an ID of "addNewFragment" so that when I click on it, the jQuery function executes.

I have a controller called FragmentController.java. It takes the form of:

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@RequestMapping("/fragments/**")
@Controller
public class FragmentController {

// Add request mappings as you need to.
@RequestMapping(value = "/fragments/target.page", method = RequestMethod.GET)
public String getFragment(ModelMap modelMap, HttpServletRequest request, HttpServletResponse response) {
    //Add model elements as you need to.
    return "fragmentView";
}
}

Finally, I have a view in the views.xml file declared which maps the "fragmentView" view back to an actual .jspx page.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
"http://tiles.apache.org/dtds/tiles-config_2_0.dtd"&gt;

<tiles-definitions>

<definition name="fragmentView" template="/WEB-INF/path/to/fragments/myNewPageFragment.jspx" />

</tiles-definitions>

As an aside, jspx pages are naturally XML based. jQuery can't insert XML into an HTML based DOM. Make sure you start them with:

 <div xmlns:jsp="http://java.sun.com/JSP/Page" >
      <jsp:output omit-xml-declaration="yes"/>
      <jsp:directive.page contentType="text/html; charset=ISO-8859-1" />

Otherwise, you get a mysterious JavaScript error:

Error: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" location: "http://127.0.0.1:8080/path/to/jquery/jquery-1.4.2.min.js Line: 113"]

Hope this helps!