CommandLink not Working on a Lazy Loaded Primefaces Datascroller

Question

I\'m having an issue with lazy loading a Primefaces Datascroller component.

I have a jsf page that should display 10 events on page load. If the user wants to see more h

Answer 1

I finally had time to spend on this issue and I found a workaround. It's a hack so maybe the proper solution would be to use a different component or create my own.

It seems like Primefaces DataScroller limitation that occurs when using the DataScroller with a LazyDataModel. It would seem that the component was not designed to do this.

To avoid this issue, I implemented my own lazy loading where the same list instance is returned in addition to the newly added elements.

Here is my previous example modified to implement this new lazy loading pattern:

The html page:

<h:form id="mainForm" >
    <p:dataScroller value="#{backing.events}" var="event" rowIndexVar="index">
        #{event.name}
        <p:commandLink class="view-trigger"
            value="View Event Details"
            action="#{backing.initViewEventDetails(index, event)}"/>

        <f:facet name="loader"><h:outputText value=""/></f:facet>
    </p:dataScroller>

    <p:commandLink value="More" process="@form" update="@form" 
        action="#{backing.loadMore()}"
        visible="#{backing.totalCount gt backing.events.size()}"
        rendered="#{backing.totalCount gt backing.events.size()}"/>
</h:form>

The DataScroller no longer has lazy="true", chunkSize="10", uses a list called events as the value and declares an empty loader facet (to avoid auto-load more when the bottom of the list is reached). I used a commandLink that calls backing.loadMore() and updates the form to replace the loader facet.

The backing bean:

@Named("backing")
@ViewScoped
public class DataScrollerBacking implements Serializable {

private static final long serialVersionUID = 4012320411042043677L;

private static final Logger LOGGER = Logger.getLogger(DataScrollerBacking.class);

private static final Integer CHUNK_SIZE = 10;

@DataSource
@Inject
private String dataSource;

private WebEventDAO webEventDAO;

private List<Event> events;
private Integer totalCount;
private Date startDate;
private Date endDate;

@PostConstruct
public void init() {
    webEventDAO = CommonDAOFactory.getInstance(dataSource).getWebEventDAO();
    search();
}

public void search() {
    DateTime start = new DateTime(2014, 1, 1, 0, 0 ,0);
    startDate = start.toDate();
    endDate = start.plus(Years.ONE.toPeriod()).minus(Seconds.ONE.toPeriod()).toDate();

    try {
        totalCount = webEventDAO.getSearchByPeriodRaceTypeAndRaceStatusForCompanyCount(Collections.singletonList(1), startDate, endDate, null, null);
        events = new ArrayList<Event>(totalCount);
        loadMore();
    } catch (DAOException e) {
        LOGGER.error("An error occurred while retrieving events.", e);
    }
}

public void loadMore() {
    List<Event> newEvents = new ArrayList<Event>(CHUNK_SIZE);
    try {
        newEvents = webEventDAO.searchByPeriodRaceTypeAndRaceStatusForCompany(Collections.singletonList(1), startDate, endDate, null, null, true, events.size(), CHUNK_SIZE);
        events.addAll(newEvents);
    } catch (DAOException e) {
        LOGGER.error("An error occurred while retrieving events.", e);
    }

}

public void initViewEventDetails(Integer index, Event event){
    LOGGER.info("index=" + index + " eventname=" + event.getName());
}

public String getDataSource() {
    return dataSource;
}

public void setDataSource(String dataSource) {
    this.dataSource = dataSource;
}

public List<Event> getEvents() {
    return events;
}

public void setEvents(List<Event> events) {
    this.events = events;
}

public Integer getTotalCount() {
    return totalCount;
}

public void setTotalCount(Integer totalCount) {
    this.totalCount = totalCount;
}}

In the backing bean, the search method counts the total number of events, saves that information and calls loadMore() to load the first 10 events in the events list.

When the more button is clicked, loadMore() is called again and the next 10 events are appended at the end of events list.

Now when I click on newly loaded elements, the commandLink invokes the backing bean with the correct value.

Answer 2

A workaround would be to use PrimeFaces remote command, passing arguments with rc([name: 'paramName', value: someParamValue]). These arguments should be available using #{param['paramName']} EL expression

Example:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>

        <ui:composition>
            <p:dataTable id="#{id}" widgetVar="#{id}"
                         value="#{requestCache.getLazy(id, () -> dataSource)}" var="rpo"
                         selectionMode="single" selection="#{selection}"
                         lazy="true" paginator="true" rows="#{pageSizeController.pageSize}"
                         pageLinks="10" paginatorPosition="top"
                         paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         currentPageReportTemplate="(#{label.Page} {currentPage} #{label.of} {totalPages}, #{label.Row} {startRecord} - {endRecord} #{label.of} {totalRecords})"
                         rowsPerPageTemplate="5 10 20 30 40 50 100"
                         scrollable="true" scrollHeight="#{empty scrollHeight ? 300 : scrollHeight}"
                         resizableColumns="true" emptyMessage="#{label.Table_is_empty}">
    <p:column>
                    <h:outputText value="#{rpo.decreeSequence.code}" />
                    <p:commandLink id="displayAdditionalInfoCommandLink" type="link" style="float: right; text-decoration: none"
                                   onclick="displayAdditionalInfo([{name: 'refundPaymentOrderId', value: #{rpo.id}}])"
                                   title="#{label.Additional_information}">
                        <h:outputLabel for="displayAdditionalInfoCommandLink" styleClass="fa fa-info-circle"
                                       onmouseover="jQuery(this).addClass('fa-lg').css('cursor', 'pointer')"
                                       onmouseout="jQuery(this).removeClass('fa-lg')"/>
                    </p:commandLink>
                </p:column>
</p:dataTable>
            <p:remoteCommand name="displayAdditionalInfo" process="@this" update="@parent">
                <f:setPropertyActionListener target="#{refundPaymentOrderCache.refundPaymentOrder}"
                                             value="#{refundPaymentOrderRepo.find(requestCache.toLong(param['refundPaymentOrderId']))}" />
                <f:actionListener binding="#{dialog.displayInputForm('RPO_ADDITIONAL_INFO')}" />
            </p:remoteCommand>
</ui:composition>
    </h:body>
</html>

Answer 3

I found a good explanation about the behavior of request scope in this link http://www.theserverside.com/news/thread.tss?thread_id=44186

If you are using ManagedBeans in request scope, you get problems with CommandLinks inside DataTables. DataTables are one thing I really like about JSF, and CommandLinks often come in handy as well. But when you put a CommandLink inside a DataTable, e. g., to select the entry of the row in which the CommandLink is, you get bitten. That is, if you want ManagedBeans with request scope. The action which should be triggered by the CommandLink is never triggered, the page is simply rendered again. The reason for this behaviour is that the DataTable modifies the id of the CommandLink during renderering, but the CommandLink does not know that it was rendered with a different id. During the decoding of the request which was triggered by clicking the CommandLink, the ComandLinkRenderer looks at a hidden form parameter. If the value of that form parameter equals the id of the CommandLink, an action is queued. If not, nothing is done. Since the DataTable changes the ids, the value of the hidden form parameter does not match the id of the CommandLink.

Based on above context, you need to change the scope annotations from @ViewScoped to @SessionScope, and your problem will be solved automatically. It seems to be a better solution than write additional code, unless you need to keep the @ViewScopped