Find solution
How to return the response from an asynchronous function?

How do I update a c:forEach(table) using Ajax success data in Spring project?

  • Following is the AJAX code where I select a value in dropdown and I get a List back from controller. When I get the list back, I want to update the c:forEach item using the AJAX result. AJAX <script> $(document).ready(function() { $("#byCollege").change(function() { /* $("select option:selected").first().each(function() { $("select option:selected").submit(function(event) { */ // Get and convert the data for sending // Example: This variable contains the selected option-text var collName = $('#byCollege').val(); var studentName = '${salary}'; var json = {"name" : studentName, "collName" : collName}; // Send the data as an ajax POST request $.ajax({ url: "http://localhost:8080/myProject/mvc/byCollege", type: 'POST', dataType: 'json', data: JSON.stringify(json), contentType: "application/json", mimeType: 'application/json', success: function(response) { alert(JSON.stringify(response)); $("#studList").html(JSON.stringify(response)); }, error: function(data, status, er) { alert("error: " + data + " status: " + status + " er:" + er); } }); }); }); $(document).ready(function() { alert(document.getElementById('studentName').val()); }); var current = document.getElementById('studentName').value(); currnet.value = <c:out value="${salary}"/> //=<c:out value="${salary}"/>; </script> </head> <body> Controller method code @ResponseBody @RequestMapping(value = "/byCollege", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE) public List<OneStudentResult> filterByColl(@RequestBody OneStudentResult oneStudentResult, ModelMap model){ ModelAndView modelAndView = new ModelAndView(); String deptName = null; nameList = resultService.getStudentByColl(oneStudentResult.getName(), oneStudentResult.getCollName()); Iterator<OneStudentResult> itr = nameList.iterator(); Set<String> uniqueDeptList = new TreeSet<String>(); while(itr.hasNext()){ // deptName = itr.next().getDeptName(); // if(!uniqueDeptList.contains(deptName)){ // uniqueDeptList.add(deptName); // } System.out.println(itr.next().getName()); } uniqueDeptList.add(" Select a Department "); model.addAttribute("uniqueDeptList", uniqueDeptList); model.addAttribute("nameList", nameList); modelAndView.addObject("nameList", nameList); // return "nameResult"; return nameList; } Set<String> uniqueDeptList = new TreeSet<String>(); while(itr.hasNext()){ deptName = itr.next().getDeptName(); if(!uniqueDeptList.contains(deptName)){ uniqueDeptList.add(deptName); } } uniqueDeptList.add(" Select a Department "); model.addAttribute("uniqueDeptList", uniqueDeptList); model.addAttribute("nameList", nameList); return "nameResult"; } Actually the purpose of the AJAX call is to update the <c:forEach items="${nameList}" var="studentList" >  in jstl of jsp using AJAX. PS: As of now I could see my old table going away and I see this my List as follows [{"regNo":"1234","name":"ABCD","collName":" COLLEGE OF ENGINEERING","deptName":"B.E. Electronics and Communication Engineering","results":null,"subjCode":null,"subjName":null,"grade":null,"result":null}] Please stop saying post these questions in Stackoverflow.

  • Answer:

    This code is almost there - the problem remaining is that JSON.stringify() returns a JSON string representation of a the object, and not something suitable for HTML. When using plain JavaScript + jQuery, the HTML to be be displayed using $().html() must be constructed manually, by iterating through the object. For example: http://jsfiddle.net/9cwLsc0g/ However, this usage of pre-creating the HTML table using an c:forEach iteration for the page load, and then reloading it with JavaScript, makes use of duplicate code doing the same thing - the first with a server-side page, the second with client-side. This type of requirement is usually done by client-side only, though it may be useful so that there is no visible browser refresh upon the first load.

Miguel Paraz at Quora Visit the source

Was this solution helpful to you?

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.