All geek questions in one place

Any way to use ajax with jstl customtags without duplicating tags in javascript?

I am working on a page where part of the content loads fine and the pages are rendered using jsps. Product images and links generated on this page are custom jstl tags.

When a user scrolls through more products requested from the server in JSON response and then using UnderscoreJS templates, they are displayed and added at the bottom of the page. Is there a way to use JSTL tags in Javascript without creating them using a javascript function (it will not be possible to recreate all of them in javascript).

What is the best way to handle this scenario? I think I could return a processed html response for ajax call, but that would mean that I have some ajax requests that use json and some that use rendered html ...

+4
source share
3 answers

You cannot reuse JSTL tags in JavaScript, because they are Java, not JavaScript, and because they run on the server side, because the page is displayed, and not on the client.

However, since your JavaScript can already receive and display data, why not just end up rendering the first part with JSTL and do it all in JavaScript / Ajax / UnderscoreJS?

+2
source

One way to solve this problem is to make the AJAX way to return HTML instead of simple objects.

You can write a jsp page that will create html for new entries and send html as a response that can be added to the previous content.

Example

Suppose your page looks like

 <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 content and make an ajax call, let the server return a processed html response, for example

  <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>

What you can easily add to container . You can use the jsp page to generate html.

+1
source

I used at least two (more or less similar) solutions in the same situation.

  • Use JSP. The first request (a page with a list of product images and links) should return the JSP for the entire page, for example.

     <%@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>

    The second request (AJAX request to continue the list) should return the JSP with the requested part of the list:

     <c:forEach items="${products}" var="product"> <%@include file="productInfo.jsp"%> </c:forEach>

    Its contents can be inserted by the AJAX response handler in the browser in the DOM without any additional processing. Note that both answers include the same JSP to display information about the same product.

  • Instead of <%@include file="..."%> you can 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 the requested part of the list:

     <c:forEach items="${products}" var="product"> <tag:productInfo product="${product}" /> </c:forEach>

This way you can use one view (JSP) for both answers (AJAX and without AJAX), and eliminate the second rendering mechanism for AJAX (JSON + DOM manual creating a snippet from JavaScript).

+1
source

Source: https://habr.com/ru/post/1447550/

More articles:


All Articles