On Primefaces datatable lazy loading complete update backing bean

Question

I want to update backing bean after the primefaces datatable lazy loading is complete. I see that the API has a onSuccess & onComplete method for calling clientside code. But I would like to update backing bean based on the default selection. I have registered the "page" event with my datatable

<p:ajax event="page" update="" onstart="PF('loadingDialog').show()" onsuccess="PF('loadingDialog').hide()" listener=""/>

I could have used the listener but the problem is listener is invoked even before the server side loading method is complete.

Answer 1

RemoteCommand provides a simple way to execute backing bean methods with javascript.

The example is shown below.

xhtml

<h:form id="form">
    <p:remoteCommand name="rc" update="msgs" 
                     actionListener="#{remoteCommandView.execute('Wittakarn')}" />
    <p:growl id="msgs" showDetail="true" />
    <p:dataTable var="car" value="#{dtLazyView.lazyModel}" 
                 paginator="true" rows="10"
                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} 
                 {PreviousPageLink} 
                 {CurrentPageReport} 
                 {NextPageLink} 
                 {LastPageLink}"
                 rowsPerPageTemplate="5,10,15" 
                 selectionMode="single" 
                 selection="#{dtLazyView.selectedCar}" 
                 id="carTable" 
                 lazy="true">
        <p:ajax event="rowSelect" 
                listener="#{dtLazyView.onRowSelect}" 
                update=":form:carDetail" 
                oncomplete="PF('carDialog').show()" />
        <p:ajax event="page" 
                update=":form:carDetail" 
                oncomplete="rc()" />
        <p:column headerText="Id" 
                  sortBy="#{car.id}" 
                  filterBy="#{car.id}">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" 
                  sortBy="#{car.year}"
                  filterBy="#{car.year}">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" 
                  sortBy="#{car.brand}" 
                  filterBy="#{car.brand}">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" 
                  sortBy="#{car.color}" 
                  filterBy="#{car.color}">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <p:dialog header="Car Detail" 
              widgetVar="carDialog" 
              modal="true" showEffect="fade" 
              hideEffect="fade" 
              resizable="false">
        <p:outputPanel id="carDetail" 
                       style="text-align:center;">
            <p:panelGrid  columns="2" 
                          rendered="#{not empty dtLazyView.selectedCar}" 
                          columnClasses="label,value">
                <f:facet name="header">
                    <p:graphicImage 
                        name="demo/images/car/#{dtLazyView.selectedCar.brand}-big.gif"/> 
                </f:facet>

                <h:outputText value="Id:" />
                <h:outputText value="#{dtLazyView.selectedCar.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{dtLazyView.selectedCar.year}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{dtLazyView.selectedCar.color}" 
                              style="color:#{dtLazyView.selectedCar.color}"/>

                <h:outputText value="Price:" />
                <h:outputText value="#{dtLazyView.selectedCar.price}">
                    <f:convertNumber type="currency" currencySymbol="$" />
                </h:outputText>
            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>
</h:form>

managedbean

@ManagedBean
public class RemoteCommandView {

    public void execute() {
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Executed", "Using RemoteCommand."));
    }

    public void execute(String detail) {
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, detail, "Using RemoteCommand."));
    }
}

@ManagedBean(name="dtLazyView")
@ViewScoped
public class LazyView implements Serializable {

    private LazyDataModel<Car> lazyModel;

    private Car selectedCar;

    @ManagedProperty("#{carService}")
    private CarService service;

    @PostConstruct
    public void init() {
        lazyModel = new LazyCarDataModel(service.createCars(200));
    }

    public LazyDataModel<Car> getLazyModel() {
        return lazyModel;
    }

    public Car getSelectedCar() {
        return selectedCar;
    }

    public void setSelectedCar(Car selectedCar) {
        this.selectedCar = selectedCar;
    }

    public void setService(CarService service) {
        this.service = service;
    }

    public void onRowSelect(SelectEvent event) {
        FacesMessage msg = new FacesMessage("Car Selected", ((Car) event.getObject()).getId());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
}

model

public class Car implements Serializable {

    public String id;
    public String brand;
    public int year;
    public String color;
    public int price;
    public boolean sold;

    public Car() {}

    public Car(String id, String brand, int year, String color) {
        this.id = id;
        this.brand = brand;
        this.year = year;
        this.color = color;
    }

    public Car(String id, String brand, int year, String color, int price, boolean sold) {
        this.id = id;
        this.brand = brand;
        this.year = year;
        this.color = color;
        this.price = price;
        this.sold = sold;
    }

    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }

    public String getBrand() {
        return brand;
    }
    public void setBrand(String brand) {
        this.brand = brand;
    }

    public int getYear() {
        return year;
    }
    public void setYear(int year) {
        this.year = year;
    }

    public String getColor() {
        return color;
    }
    public void setColor(String color) {
        this.color = color;
    }

    public int getPrice() {
        return price;
    }
    public void setPrice(int price) {
        this.price = price;
    }

    public boolean isSold() {
        return sold;
    }
    public void setSold(boolean sold) {
        this.sold = sold;
    }

    @Override
    public int hashCode() {
        int hash = 7;
        hash = 59 * hash + (this.id != null ? this.id.hashCode() : 0);
        return hash;
    }

    @Override
    public boolean equals(Object obj) {
        if (obj == null) {
            return false;
        }
        if (getClass() != obj.getClass()) {
            return false;
        }
        final Car other = (Car) obj;
        if ((this.id == null) ? (other.id != null) : !this.id.equals(other.id)) {
            return false;
        }
        return true;
    }
}

carService

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.UUID;
import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;
import org.primefaces.showcase.domain.Car;

@ManagedBean(name = "carService")
@ApplicationScoped
public class CarService {

    private final static String[] colors;

    private final static String[] brands;

    static {
        colors = new String[10];
        colors[0] = "Black";
        colors[1] = "White";
        colors[2] = "Green";
        colors[3] = "Red";
        colors[4] = "Blue";
        colors[5] = "Orange";
        colors[6] = "Silver";
        colors[7] = "Yellow";
        colors[8] = "Brown";
        colors[9] = "Maroon";

        brands = new String[10];
        brands[0] = "BMW";
        brands[1] = "Mercedes";
        brands[2] = "Volvo";
        brands[3] = "Audi";
        brands[4] = "Renault";
        brands[5] = "Fiat";
        brands[6] = "Volkswagen";
        brands[7] = "Honda";
        brands[8] = "Jaguar";
        brands[9] = "Ford";
    }

    public List<Car> createCars(int size) {
        List<Car> list = new ArrayList<Car>();
        for(int i = 0 ; i < size ; i++) {
            list.add(new Car(getRandomId(), getRandomBrand(), getRandomYear(), getRandomColor(), getRandomPrice(), getRandomSoldState()));
        }

        return list;
    }

    private String getRandomId() {
        return UUID.randomUUID().toString().substring(0, 8);
    }

    private int getRandomYear() {
        return (int) (Math.random() * 50 + 1960);
    }

    private String getRandomColor() {
        return colors[(int) (Math.random() * 10)];
    }

    private String getRandomBrand() {
        return brands[(int) (Math.random() * 10)];
    }

    private int getRandomPrice() {
        return (int) (Math.random() * 100000);
    }

    private boolean getRandomSoldState() {
        return (Math.random() > 0.5) ? true: false;
    }

    public List<String> getColors() {
        return Arrays.asList(colors);
    }

    public List<String> getBrands() {
        return Arrays.asList(brands);
    }
}

You can see more detail: RemoteCommand

Answer 2

Since I prefer using vanilla JSF, I would do the following

put this above your table

<h:commandButton id="call-me-after-page"
                style="display:none;" action="#{myBean.myAction}">
                <f:ajax execute="@form" render="@form"></f:ajax>
            </h:commandButton>

and set the oncomplete like this:

<p:ajax event="page" oncomplete="$('#call-me-after-page').click();"></p:ajax>