any way to use ajax with jstl customtags without duplicating tags in javascript?
Question
I am working on a page where part of the content is loaded normally and the pages are rendered using jsps. The product images and links generated on that page are by custom jstl tags.
When the user scrolls more products are requested from the server in a JSON response and then using UnderscoreJS templates they are rendered and added to the bottom of the page. Is there any way I can use the JSTL tags in Javascript without recreating them using a javascript function (it won't be possible to re-create all of them in javascript).
What is the best way to handle this scenario? I guess I could return a rendered html response for the ajax call, but that would mean I have some ajax requests which use json and some that use rendered html...
3 answers
solution1
3 2012-11-26 04:18:29
You can't re-use the JSTL tags in JavaScript both because they are Java, not JavaScript, and because they are executed on the server side as the page is rendered, not on the client.
However, since your JavaScript can already get and render the data, why not just do away with rendering of the first part with JSTL, and do the whole thing in JavaScript/Ajax/UnderscoreJS ?
solution2
1 2012-11-26 04:51:34
One way to solve this is to make AJAX method to return the HTML instead of the plain objects.
You can write a jsp page which will create the html for the new records and send the html as the response which can be appended to the previous contents.
Ex
Assume that your page is like this
<div class="container">
<div class="record rec-1">
//some html code
</div>
<div class="record rec-2">
//some html code
</div>
.....
.....
<div class="record rec-n">
//some html code
</div>
</div>
Then when you want to load more contents and make the ajax call let the server return a processed html response like
<div class="record rec-n+1">
//some html code
</div>
<div class="record rec-n+2">
//some html code
</div>
.....
.....
<div class="record rec-n+k">
//some html code
</div>
Which you can easily apped to the container . You can use a jsp page to generate the html.
solution3
1 2012-12-02 22:31:42
I've used in the same situation at least two (more or less similar) solutions.
Use included JSP. The first request (page with list of product images and links) should return JSP for the whole page, eg
<%@page contentType="text/html; charset=UTF-8"%> <!DOCTYPE html> <html> ... skipped ... <c:forEach items="${products}" var="product"> <%@include file="productInfo.jsp"%> </c:forEach> ... skipped ... </html>Second request (AJAX request for continuation of the list) should return JSP with requested part of list:
<c:forEach items="${products}" var="product"> <%@include file="productInfo.jsp"%> </c:forEach>Its content may be inserted by AJAX response handler in browser into DOM without any additional processing. Note that both responses include the same JSP to render information about the single product.
Instead of
<%@include file="..."%>you may use JSP tags . The rest looks similar: JSP for the whole page<%@page contentType="text/html; charset=UTF-8"%> <!DOCTYPE html> <html> ... skipped ... <c:forEach items="${products}" var="product"> <tag:productInfo product="${product}" /> </c:forEach> ... skipped ... </html>JSP with requested part of list:
<c:forEach items="${products}" var="product"> <tag:productInfo product="${product}" /> </c:forEach>
This way you can reuse single view (JSP) for both responses (AJAX and non-AJAX), and eliminate second rendering mechanism for AJAX (JSON + manual DOM fragment creation from JavaScript).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.