Question

I am using spring mvc 3.0 to build an web application.

User can get customers by writing their id or just sends empty form and i turn back all customers that user can traverse between customers by using buttons. Question is how to do it via ajax or javascript without postbacking.

I add customer object to modelAttribute and in my jsp file using :

 <form:form modelAttribute="Customer" method="POST">
           <form:input path="name"/>

@RequestMapping(value = "/customer", method = RequestMethod.GET)
    public String handleCustomer(Model md,HttpSession session) {

       Customer customer= (Customer ) session.getAttribute("customer");

        if( customer== null)
        {
            customer=  new Customer ();
        }
        md.addAttribute("Customer ",customer);
        return "customer";
    }

Here is the question how to change this model attribute without postback. Now according to this get method when I set Customer object all fields are set since I am using “path” to bind fields. I tried to change via ajax callback but it does not work. I don’t want to get all fields and assign one by one with jQuery.

Here is my JS function:

    $("#Customer").submit(function() {
//                var customer= $(this).serializeObject();
//                $.postJSON("Customer", customer, function(data) {
//                  
//                });

                $.getJSON("customer/query.htm",{ id: $('#id').val() }, function(result) {                           

                    $('#testdiv').val(result);

            });
                return false;               
            });

I have tried both getJSON and postJSON functions. Can you link some sort of book, tutorial or documentation it will be helpful.

Answer 1

Here is the answer of my question i could not find a way to refresh my form with json response.

But with ajax webrequest.

Here is the ajax Utils class.

import org.springframework.web.context.request.WebRequest;

public class AjaxUtils {

    public static boolean isAjaxRequest(WebRequest webRequest) {
        String requestedWith = webRequest.getHeader("X-Requested-With");
        return requestedWith != null ? "XMLHttpRequest".equals(requestedWith) : false;
    }

    public static boolean isAjaxUploadRequest(WebRequest webRequest) {
        return webRequest.getParameter("ajaxUpload") != null;
    }

    private AjaxUtils() {}
}

in controller we add

 @RequestMapping(value = "/customer.htm", method = RequestMethod.GET)
    public String handleCustomer(Model md, HttpSession session,WebRequest webRequest) {

          Customer customer= (  Customer ) session.getAttribute("customer");

        if (customer== null) {
            customer= new   Customer();
        }
        md.addAttribute("Customer", customer);
        md.addAttribute("ajaxRequest", AjaxUtils.isAjaxRequest(webRequest));
        return "customer";
    }

    @RequestMapping(value = "/customer.htm", method = RequestMethod.POST)
        public String processSubmit(  Customer  customer, BindingResult result, WebRequest webRequest, HttpSession session, Model model) {
            customer= dataService.getCustomer(customer.getId());

            session.setAttribute("customer", customer);
            if (AjaxUtils.isAjaxRequest(webRequest)) {
                // prepare model for rendering success message in this request
                model.addAttribute("ajaxRequest", true);
                            model.addAttribute("Customer",customer);
                return null;
            }


            return "customer";
        }

functions so in jsp or view side we post page with :

$("#Customer").submit(function() {  
                    $.post($(this).attr("action"), $(this).serialize(), function(html) {
                        $("#customerdiv").replaceWith(html);

                    });
                    return false;  
                });

To summarize with the help of the ajax utils class we set the type of the request full postback or ajaxrequest in our post handler function we made our changes and this changes directly affects the page and form. No need to handle response or set all fields one by one with jquery hope this helps someone.