Ajax how to send spring mvc's view into a div

Question

Before I ask my next question, let me explain my project first.

I have a web site that is running well now. It is basically a information publication web site, which means mainly there are a lots of static html pages.

Application environment is: Tomcat 7.0.51 running on Mac OS X server(3.1.1).

Application developed in Spring 3.1.1 with STS 3.5.

The business applications have two parts:

Part 1 is internal operational application. This one done, main business functions are here. Business functions include :

• business/product offering
• customer
• contract
• payment/invoice system

The above are running fine. But this part of application does not have any control access. It works inside the firewall and is not publicly accessible.

Part 2 is a business publication application, is deployed in same tomcat server as another application name, this part was exposed to public through AJP/Apache server on Port 80, it is publicly accessible. This part currently has about 23 html pages, is nested with divs and iframes, application view is classic Header-LeftMenu-Content-Footer style. Header, LeftMenu, Content and Footer are individual HTMLpages. Content is injected by press buttons located in LeftMenu panel.

After a while of running this, we found that our customer is looking to leave some message or even register their information and apply business online on our web site, that's why I am trying to update it to a dynamic web application.

As the business logic already done, I don't need redo it at all, just bring my internal business logic plus a access control mechanism to let customer register their interest and apply business online, without change business publication at all. so all the static html will stay without touch.

I had done customer login/logout, session management logic through Ajax call through my Spring MVC controller, and now, I am planning bring business logic through Ajax call from html pages.

I did make ajax call to talk to my business logic controller, the controller can set up my UI Model and return JSP handle to Ajax caller. JSP was called too (I found the debug information from catalina.out ). I am trying to send the JSP content to render a particular div, such as "Content", but I didn't get it yet.

In my understanding, when I make ajax call from html, my MVC controller can set up my view and pass the JSP handle back to ajax as return value, and I can send that JSP handle to ajax success function as parameter, but unfortunately, from this point, I lost controlling, as JSP is MVC's view, and it don't return any thing to caller (Ajax).

I am quite new with Ajax, I don't know how to let ajax to send a MVC's view to a specified div in its success function.

Does any one have this sort experience to share with me, any advice is highly appreciated.

Cidy from Australia

Answer 1

From the client side pov rendering something into a div is pretty easy using jquery ajax functionality.

Rendering the response on the server side depends a bit on the render framework you are using. I dont know if JSP is supporting rendering fragments of a page, but Thymeleaf for example handles exactly this for you. You can reference "any" tag inside a template and render just this part.

If JSP is not supporting this kind of feature you could go around it by defining a small page template containing only what you want to render during this request.

EDIT: quick reference to div replacement:

An Ajax call does not expect any specific type, just a response. How the content of that response is treated is up to your code on the javascript side. Take a look here: JQuery: replace DIV contents with html from an external file. Full example?

You call the spring controller which returns an html response and you inject it into the div.

Answer 2

I found out the solution by my self to resolve my problem. Hope it can help any one else have same issue on their ajax call.

The key solution is: The controller has to set ModelAndView by corresponding view name and the view must link to proper JSP. My controller looks like:

/*Added for ajax call response function*/
@RequestMapping(value="/testControllerURL") 
public ModelAndView testControllerURL(ModelMap model) throws Exception {
    String custSequence=getCustomerIdSequence(thsssequenceDAO);
    model.addAttribute("CustSequence",custSequence);
    model.addAttribute( "user", "Joe Dirt" );
    System.out.println("ajax text controller url called.");
    ModelAndView mav = new ModelAndView();
    String viewName = "jsp/ajaxCall";
    mav.setViewName(viewName);/*create a ModelAndView by given View Name*/
    return mav;
}

my ajax function looks like:

<script type="text/javascript"> <!-- get login information from controller -->
function createCustomer() {
var contextPath=window.location.pathname;
console.log("Context Path: "+contextPath);
console.log("createCustomer called.");
$.ajax({
    contentType: "application/json; charset=utf-8",
    url: 'testControllerURL',
    data: ({name : "me"}),
    success: function(data) {
        var elem = document.getElementById('#sign_in');
        console.log(elem.ATTRIBUTE_NODE);
        console.log(data);
        <!-- $('#sign_in').load($(data).attr('href')); -->
        <!-- $('#content-container').load(data); -->
        $('#sign_in').html(data);
    }
  });
}
</script>

The ajax call will take the output of JSP generated from MVC and display it in the specified div.

I hope this one can help any one who is looking for a solution on it.

Answer 3

What is usually done in situations like your is for your Controller to return a JSON string representing the data of the particular call and then the success javascript function uses that data and populates a front end template built with tools like mustache or Handlebars. Once the template is populated is can be appended to the DOM wherever you need.

Take note that nowhere in the flow I described did the View come into play. Views are used when you need server side templating, that is when you need to setup the initial call. You could might be able to find a way to run the JSP and send it's result, but I would advise not going down that road