How to visualize tile views in Spring MVC via AJAX?

Question

I use Spring 3 MVC to create a web application that has a common layout and a “content” div that changes / updates frequently. The markup of the content is in my own Tile, and I want to update this tile through AJAX without refreshing the entire page. I know how to start an AJAX request from a client and process it in the controller. I am mostly confused by the Spring configuration (which is viewing, viewing permissions, etc.). Does anyone have an example?

Answer 1

Basically, you can create a tile view that contains only the content you want, without the HTML skeleton, and visualize this view / fragment in the controller that processes the ajax request.

Let's say you have a foo.jsp page. When calling http://example.com/myapp/foo , the whole html page should be displayed with foo.jsp as the contents of the body. When calling http://example.com/myapp/ajax/foo only foo.jsp should be sent without the entire HTML skeleton, so that the client can load it through ajax and replace the part on the page.

You end up with two definition definitions: one that includes foo.jsp on the whole page and one that contains only foo.jsp. app-layout.jsp will contain the entire HTML skeleton with the body attribute.

 <definition name="foo" template="/WEB-INF/layouts/app-layout.jspx"> <put-attribute name="body"> <definition template="/WEB-INF/views/foo.jsp"> <put-attribute name="message" value="hello"/> </definition> </put-attribute> </definition> <definition name="ajax.foo" template="/WEB-INF/views/foo.jsp"> <put-attribute name="message" value="hello"/> </definition> 

The controller that processes the URL /ajax/foo will return the view "ajax.foo", the controller that processes the URL /ajax/foo will return the view "foo".

 @Controller @RequestMapping("/ajax") public void class AjaxController { @RequestMapping("/foo") public String foo() { return "ajax.foo"; } } @Controller @RequestMapping("/") public void class AppController { @RequestMapping("/foo") public String foo() { return "foo"; } }