How do I render a Spring view(JSP) in a tag after submit a form?


I'm using Spring MVC for my application. I have a form for receiving start date and end date from daterangepicker. And I want to display another view, that has a table after querying, into the "dataDiv" below the form after submitting the form, but not reload the page. What I've done so far, the result is when I submitted a form, it redirected to new page (request-data.jsp) but the table worked fine.

Here are my code...


<pre class="snippet-code-html lang-html prettyprint-override"><form action="view-data" method="get" id="ajaxTest"> <div id="reportrange" class="form-control"> <i class="fa fa-calendar"></i> <span></span> <b class="caret"></b> </div> <input type="hidden" id="startDate" name="startDate" /> <input type="hidden" id="endDate" name="endDate" /> <input type="submit" value="VIEW" id="ajaxBtn" /> </form> <div id="dataDiv"></div>

<strong>Javascript</strong> I used Ajax for loading another view.

<pre class="snippet-code-js lang-js prettyprint-override">$('#ajaxTest').submit(function(event) { var startDate = $('#reportrange').data('daterangepicker').startDate; var endDate = $('#reportrange').data('daterangepicker').endDate; document.getElementById("startDate").value = startDate; document.getElementById("endDate").value = endDate; $.ajax({ url : "../request-data", type : 'GET', data : data, success : function(response) { alert("success"); $('#dataDiv').html( response ); }, error : function() { alert("error"); } }); return false; });

<strong>Spring Controller</strong>

<pre class="snippet-code-js lang-js prettyprint-override">@RequestMapping(value = "/request-data", method = RequestMethod.GET) public ModelAndView requestRanking(HttpServletRequest httpRequest, @RequestParam("startDate") Date stDate, @RequestParam("endDate") Date edDate, RedirectAttributes rd) { ModelAndView mav = new ModelAndView(); /* *Query for book created between stDate and edDate */ rd.addFlashAttribute("bookForms", bookForms); mav.setViewName("request-data"); return mav; }

And in <strong>request-data.jsp</strong> view

<pre class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { $('.footable').footable(); }); <pre class="snippet-code-html lang-html prettyprint-override"><div> <c:if test="${!empty bookForms}"> <input type="text" class="form-control input-sm m-b-xs" id="filter" placeholder="Search in table" /> <table id="page-size-example" class="footable table table-stripped" data-page-size="" data-filter=#filter data-sorting="true"> <thead> <tr> <th data-type="numeric" data-sort-initial="true">#</th> <th>BOOKNAME</th> <th>PRICE</th> <th>CREATED_DATE</th> </tr> </thead> <tbody> <c:forEach items="${bookForms}" var="bookForm" varStatus="status"> <tr> <td>${status.count}</td> <td>${bookForm.name}</td> <td>${bookForm.price}</td> <td>${bookForm.createdDate}</td> </tr> </c:forEach> </tbody> </table> </c:if> </div>

Is there any other way to do this? Please help me out. Thanks


I found a solution for you <a href="https://stackoverflow.com/questions/26031254/how-to-use-spring4-restcontroller-to-return-a-jsp-page" rel="nofollow">how to use spring4 @RestController to return a jsp page?</a> You should add a @ResponseBody annotation to your method or @RestController to your class if every method works with ajax. This annotations make your controllers/methods to work async with ajax.

Some code

@RequestMapping(value = "/request-data", method = RequestMethod.GET) @ResponseBody public ModelAndView requestRanking(HttpServletRequest httpRequest, @RequestParam("startDate") Date stDate, @RequestParam("endDate") Date edDate, RedirectAttributes rd) { ModelAndView mav = new ModelAndView(); mav.setViewName("request-data"); //your actions return mav; }


  • Matching line width in legend to line width in plot using ggplot2
  • How to set “activate” class to bootstrap navbar in Angular 2 while using page anchor navigation?
  • MVC5 Ajax.BeginForm upload form with files
  • How to find the Custom Field detail of a product backlog item TFS by WIQL
  • “^” in regex pattern make an error
  • Sonata Admin Bundle custom group icon
  • How can I compose a VM into a view within an Aurelia validation renderer
  • Toggle DIV state localstorage
  • Javascript onclick does not fire when developer tools are open
  • Create unique ids for a group
  • Looping SQL statement insert
  • how to find the index position of the ARRAY Where NSPredicate pick the value. I use filteredArrayUsi
  • Java: List the dates between a start and end date [duplicate]
  • Finding regular expressions for languages otherwise described
  • LINQ to NHibernate WHERE EXISTS IN
  • SharePoint Designer 2010 - Determine if today's date is within x days of a start date column us
  • Can you build a truly RESTful service that takes many parameters?
  • JSON Error when parsing “… has no method 'replace'”
  • Get the last date of each month in a list of dates in Python
  • How to calculate networkdays minus holidays between 2 dates
  • insert radio value multiple data codeigniter in database to one row?
  • Universal Image Loader reuse images
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • JSON response opens as a file, but I can't access it with JavaScript
  • req.body is undefined - nodejs
  • Bug in WPF DataGrid
  • Updating server-side rendering client-side
  • jQuery tmpl and DataLink beta
  • How can I estimate amount of memory left with calling System.gc()?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How to set the response of a form post action to a iframe source?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • -fvisibility=hidden not passed by compiler for Debug builds
  • How do I configure my settings file to work with unit tests?
  • Getting Messege Twice Using IMvxMessenger
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Busy indicator not showing up in wpf window [duplicate]
  • Binding checkboxes to object values in AngularJs
  • How to load view controller without button in storyboard?