How To Reload A Html Table Without Refreshing The Whole Page While Working With Spring Mvc

I am using Spring MVC , example.jsp file with Javascript. I have been stuck on this for a long time. Is it possible to use Javascript to laod new data from DB into HTML tables wit

Solution 1:

If you want to reload a part of you page using JavaScript, basically AJAX. This is how you should do it.

Client Side

Let's assume that you're using jQuery as a JavaScript Framework. You'll need to use jQuery.ajax() in the Client Side.

var successHandler = function( data, textStatus, jqXHR ) {
  // After success reload table with JavaScript// based on data...
};

var errorHandler = function( jqXHR, textStatus, errorThrown ) {
  // Error handler. AJAX request failed.// 404 or KO from server...alert('Something bad happened while reloading the table.');
};

var reloadData = function() { 
  // Process your requestvar request = newObject();
  request.id = 'some id'; // some data// Make the AJAX call
  jQuery.ajax({
    type       : 'POST',
    url        : 'http://domain/context/reload-data-url',
    contentType: 'application/json',
    data       : JSON.stringify(request)
    success    : successHandler,
    error      : errorHandler
  });
};

Call the reloadData() function when you need to reload the table.

Server Side

You're using Spring MVC. Then your Controller should look like:

// Spring MVC Controller@ControllerpublicclassReloadDataController {

   // Request Mapping@RequestMapping(value = '/reload-data-url', method = RequestMethod.POST)@ResponseBodypublic ResponseEntity<String> processReloadData(@RequestBody String body) {

     // Get your requestJSONObjectrequest=newJSONObject(body);
     Stringid= request.getString("id"); // Here the value is 'some id'// Get the new data in a JSONObjectJSONObjectresponse=newJSONObject();
     // build the response...// Send the response back to your clientHttpHeadersheaders=newHttpHeaders();
     headers.add("Content-Type", "application/json; charset=utf-8");
     returnnewResponseEntity<String>(response.toString(),
                headers, HttpStatus.OK);
   }

 }

You don't have to use JSON but I think this is the best way. Hope this will help you.

Solution 2:

I was also stucked into it than i finally found this solution which use ModelAndView See this solution it may work Thymeleaf table update without page reload

My answer would be late but someone might help...