java jstl populate table data using ajax - ajax

Question

i implemented a java ee webclient in spring framework. it reads data from a webservice and display records in a table format. on this table, im able to a delete multiple record by selecting the checkbox.
currenty im refreshing the table records using meta refresh. reason is because javascript timer refresh will bring the page to top. it affects the user experience when he/she is viewing record.
when a user select records to be deleted and click delete, a javascript confirm dialog box popup. the problem with using meta refresh is im not able to stop the refresh when the confirm dialog box popup. i tried jquery but it didnt work.
im thinking of implementing ajax to retrieve the records for the table. but how can i implement it efficiently. the records in the table are dynamic.
to add further, i have multiple html tables. for example,
#table 1
<table><tr><td></td>....</tr></table>
#table 2
<table><tr><td></td>....</tr></table>
#table 3
<table><tr><td></td>....</tr></table>

Answer 1

I suggest that you use a JSP as a template. This means that the body of the JSP contains static elements such as HTML code, forms and tables, while you can use tag libs to insert the dynamic data. In your case the data from the database record.
<c:forEach items="${listOfRecords}" var="item">
<table>
<tr>
<td>
<c:out value="${item}"/>
</td>
</tr>
</table>
</c:forEach>
Then using a servlet you can send this in the response to the client. The AJAX call will receive the response and append the HTML to the current table. In the code snippet below AJAX sends the data ("recordid="+id) in a request to the servlet located at /approot/myservlet. When the servlet receives the request it retrieves the record id from the request, deletes the record from the database, retrieves any new records add since the last query, passes the new records to the JSP via a request dispatcher, the HTML table containing the new data is generated and sent as a response back to the browser. The javascript in the success attribute is launched and the response which is contained in the msg variable is appended to the current table.
$.ajax({
type: "post",
url: "/approot/myservlet",
data: "recordid="+id,
success: function(msg){ $('#table1').append(msg);
});
This is just a quick overview of what I imagine is your solution. You might find the step by step guide I wrote about how to set up a J2EE application using a web service, JSP, Servlet, tag libs and AJAX.

Answer 2

I would remove the page refresh and use AJAX. This is how I imagine you should approach this problem. An AJAX call is made at regular intervals (using a timer) to a servlet that queries a database for the records added since the last such query. The records returned are formatted into HTML using a JSP template and tag libs and sent in the response to the client. The AJAX receives the response and appends the HTML to the appropriate table. To stop the AJAX from making a call to the servlet you could stop the timer just before showing the popup box and restart it when the page is updated with the records deleted.
EDIT: You could identify each table with an (id="table1") and in then you can append that HTML to the right table.