loading contents of lazily

Question

Is it possible to implement live scrolling or lazy scrolling in a <div> which has <forEach> loop. I have the following codes in a <div>, I want to load the contents lazily.

<div class="update" id="update">

                    <c:forEach var="p" items="#{statusBean.statusList}"
                        varStatus="loop">
                        <h:form>
                            <c:if test="${p.statusmsg!=null}">
                                <div class="status">
                                                                //content
                                </div>
                            </c:if>
                        </h:form>
                    </c:forEach>
</div>

not as you're describing it. you'll need to set up a separate service to supply the data, and periodically request the next batch via ajax. — Sam Dufel, Apr 09 '13 at 19:37

score 2 · Answer 1 · edited May 23 '17 at 12:21

Both JSTL and EL will be able only during view build time of the page (this is done by server). Ajax requests aren't part of view build time since they're in client browser, so JSTL and EL are useless to handle ajax requests. Still, you can make use of ajax with plain servlets as stated here: How to use Servlets and Ajax?

Since you're using JSF in your code (based on the use of deferred evaluation expression like #{statusBean.statusList} and <h:form>) and assuming you use JSF 2+, there's a good example in OmniFaces showcase: <o:componentIdParam>, the Expandable list example shows that you can make an ajax call to a @RequestScoped managed bean and retrieve a JSON String and use it to update values on client side like HTML dom.

Live scroll example based on this answer:

$(window).scroll(function(){
    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
       loadNewData();
    }
});

function loadNewData(){
    /* add code to fetch new content and add it to the DOM */
}

loading contents of lazily

1 Answers1

Linked