Spring MVC: displaying data in a dialog box after an AJAX call

Question

I am new to Spring and web technologies.

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

Problems:

• How to show a dialogue? and

• How to transfer data in a dialog box?

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 mess if you want to use jQuery and ajax calls, then do not use ModelAndView in your Spring controller. Instead, use the following return bean or dto as json using the Jackson library from Java :

Include this jar in the 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 in Dialog.jsp as hidden , this will be your modal dialog in the future (note that there are also some in the span tags):

 <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 as follows:

You can also use $.ajax and possibly handle more states like onerror and others, but this method is simpler (at least for me, you just need to evaluate if data null returning or not, find out user - if null - something happened on the server side, possibly showing an alert with a general message) - please read the 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 on the same page ( Table.jsp ) the modal dialog with your data , all made by an ajax call, to avoid redirecting pages such as ( Table.jsp to => Dialog.jsp ).