Spring MVC: Show data in a dialog after making an AJAX call

Question

I am new to Spring and web technology.

I have an table which contains a column with hyperlink. When I click on the hyperlink of a row, I need to display that rows data along with other details in a dialog. My controller method returns a ModelAndView which contains the data I need to show and the display page.

Problems:

1. How to show the dialog? and

2. How to pass the data to the dialog?

Table.jsp

<script type="text/javascript">
   function showDialog(ref, date) {

        $ajax({
            type: "POST",
            url: "/example/show.htm",
            data: {
                ref: ref,
                date: date
            }
            success: function(data) {

            },
            error: function(data) {

            }
        });
}
</script>

Mapping

@RequestMapping(value = "show.htm", method=RequestMethod.POST)
    public ModelAndView show(@RequestParam("ref") String ref, @RequestParam("date") String date, 
            HttpServletRequest request, HttpServletResponse response) {

        ModelAndView modelAndView = new ModelAndView();

        try {
            SampleDTO SampleDTO = new SampleDTO();
            sampleDTO.setDate(sdf.parse(date));
            sampleDTO.setRef(ref);

            SampleDTO billDto =  // server call                    modelAndView.addObject("showBill", sampleDto);

            modelAndView.setViewName("Dialog");
        } 
        return modelAndView;
    }

Answer 1

Your code is wrong, you are messing things, if you want to use jQuery and ajax calls then don't use ModelAndView in your Spring controller. Instead of that, use the following and return your bean or dto as a json using Jackson library from Java:

Include this jar in your lib project folder:

http://www.java2s.com/Code/JarDownload/jackson/jackson-all-1.9.9.jar.zip

Java code:

@RequestMapping(value = "businessBill.htm", method = RequestMethod.POST)
@ResponseBody
public String handleBusinessBillDetails(@RequestParam("reference") String billReference, @RequestParam("invoiceDate") String billDate, 
            HttpServletRequest request, HttpServletResponse response) {

    String json = null;        

    try {

        //1. Create 'jackson' object mapper
        ObjectMapper objectMapper = new ObjectMapper();  

        BusinessBillDTO businessBillDTO = new BusinessBillDTO();
        businessBillDTO.setBillDate(sdf.parse(billDate));
        businessBillDTO.setBillReference(billReference);

        BusinessBillDTO billDto = accountStatementBO.getBusinessBillDetails(businessBillDTO);

        //2. Convert your 'bean' or 'dto' as 'json' string
        json = objectMapper.writeValueAsString(billDto);            

    } catch (Exception ex) {
        LOGGER.error(ex);
    }
    return json;
}

Then, in Table.jsp put the div used in Dialog.jsp as hidden, this will be your modal dialog in future (note that there are some changes in the span tags also):

<div id="BusinessBill" style="display:none;">
    <h2>Bill Details</h2>
    <em>Business Ltd</em>
    <div class="row">
        <span class="spanAsLabel">Account number</span>
        <span id="dlg-account-number" class="spanAsLabel"></span>
    </div>
    <div class="row">
        <span class="spanAsLabel">Bill date</span>
        <span id="dlg-bill-date" class="spanAsLabel"></span>
    </div>
</div>

Now fix your getBusinessBill(..) method like this:

You can also use $.ajax and maybe handle more states like onerror and others but this way is simpler (at least for me, you just need to evaluate if the returned data is null or not and let know the user - if null - that something happened at server side, maybe showing an alert with a generic message) - please read comments.

function getBusinessBill(billReference, billInvoiceDate) {

    $.post("/AccountStatement/businessBill.htm", {
        reference: billReference,
        invoiceDate: billInvoiceDate
    }, function (data) {

        /* You can implement more validations for 'data', in my case I just used these 'if' conditionals but can vary. */

        if(data != null) { //returned 'data' is not 'null'

            /* parse 'data' as 'json' object
             * will be good to console.log(data) and take a look. */
            var obj = $.parseJSON(data);

            if(obj != {}) { //check if 'data' is not an empty 'json' object once transformed

               //set the 'data' in the dialog
               $('#dlg-account-number').text(obj.accountNumber);
               $('#dlg-bill-date').text(obj.billDate);

               /* open modal dialog, you can simulate it this way (for this case)
                * but the correct way is to use 'jquery-ui' dialog or any plugin you prefer.
                * At this point you will see the hidden 'div' in a visible way with your 'data'.
                */
               $('#BusinessBill').fadeIn();
            } else {
               //show 'generic' message
               alert('No results found.');
            }
        } else {
           //show 'generic' message
           alert('An error occurred, try again.');
        }
    });

}

Finally, if everything is correct, you will see at the same page (Table.jsp) the modal dialog with your data, all made by an ajax call to avoid redirection pages like (Table.jsp to => Dialog.jsp).