How to update a datatable on a click event

Question

So I try to update a datatable using a selectOneListbox. Basically i want to display different data for each month, so i tried to hardcode the month and the data changed so that part should be fine. My problem is that not only the datatable has to be update but also my service hast to be called to refill the List with new data.

My view.xhtml:

1.my selectOneListbox:

<div class="select">
                <p:selectOneListbox id="basic" value="#{dtBillingView.month}" class="monthSelect">
                <f:ajax event="click" update="#{tabelContainer}" process="@this"/>
                    <f:selectItem itemLabel="All" itemValue="0" />
                    <f:selectItem itemLabel="Januar" itemValue="1" />
                    <f:selectItem itemLabel="Februar" itemValue="2" />
                    <f:selectItem itemLabel="März" itemValue="3" />
                    <f:selectItem itemLabel="April" itemValue="4" />
                    <f:selectItem itemLabel="Mai" itemValue="5" />
                    <f:selectItem itemLabel="Juni" itemValue="6" />
                    <f:selectItem itemLabel="Juli" itemValue="7" />
                    <f:selectItem itemLabel="August" itemValue="8" />
                    <f:selectItem itemLabel="September" itemValue="9" />
                    <f:selectItem itemLabel="Oktober" itemValue="10" />
                    <f:selectItem itemLabel="November" itemValue="11" />
                    <f:selectItem itemLabel="Dezember" itemValue="12" />
                </p:selectOneListbox>
            </div>

2.my dataTable

<div class="tabels" id="tabelContainer">
                <p:dataTable var="foodEntry" value="#{dtBillingView.foodEntrys}" class="table" sortMode="single" sortBy="#{foodEntry.category}">
                    <f:facet name="header">
                        Monatsübersicht der Bistroeinkäufe von Userid
                    </f:facet>
                    <p:column class="categoryColumn" sortBy="#{foodEntry.category}" headerText="Kategorie" groupRow="true">
                        <h:outputText value="#{foodEntry.category}" />
                    </p:column>
                    <p:column class="nameColumn" headerText="Essen/Trinken">
                        <h:outputText value="#{foodEntry.name}" />
                    </p:column>
                    <p:column class="btnColumn" headerText="Details">
                        <p:commandButton update=":form:itemDetail" oncomplete="PF('itemDialog').show()" value="">
                            <f:setPropertyActionListener value="#{foodEntry}" target="#{dtBillingView.selectedFoodEntry}" />
                        </p:commandButton>
                    </p:column>
                    <p:column class="countColumn" sortBy="#{foodEntry.count}" headerText="Anzahl" sortable="true" >
                        <h:outputText value="#{foodEntry.count}" />
                    </p:column>
                    <p:column class="priceallColumn" sortBy="#{foodEntry.priceall}" headerText="Summe">
                        <h:outputText value="#{foodEntry.priceall}€" />
                    </p:column>
                </p:dataTable>

                <p:dataTable var="foodPrice" value="#{dtBillingView.foodPrices}" class="table2">
                    <p:column class="fullPriceCoulumn">
                        <h:outputText value="Gesamtpreis" />
                    </p:column>

                    <p:column class="fullPriceValueColumn">
                        <h:outputText value="#{foodPrice}€" class="fullPriceValueColumnText" />
                    </p:column>
                </p:dataTable>
            </div>

(commandbutton in datatabel works fine so i wont post the dialog for that one)

My View.java:

@ManagedBean(name="dtBillingView")
@ViewScoped
public class BillingView implements Serializable {

    private List<FoodEntry> foodEntrys;
    private float foodPrices;
    private FoodEntry selectedFoodEntry;
    private List<FoodEntry> selectedFoodEntrys;
    private int month;

    @ManagedProperty("#{FoodEntryService}")
    private FoodEntryService service;

    @PostConstruct
    public void init() {
       foodEntrys = service.createFoodEntrys(month);
       foodPrices = service.createFoodPrice();       
    }
//+ Getter and Setter

My FoodEntryService.java:

@ManagedBean(name = "FoodEntryService")
@ApplicationScoped
public class FoodEntryService {
    public List<FoodEntry> createFoodEntrys(int month) {
        connector = new MysqlCon();
        orders = connector.getOrders();
        items = connector.getItems();
        List<FoodEntry> list = new ArrayList<FoodEntry>();
        List<String> ids = new ArrayList<String>();
        for(Order order : orders) {
                            list.add(new FoodEntry(id, getCategory(id,items), getName(id, items), getPrice(order), count, getPrice(month), getFullPrice(y), getDate(month), getUserId()));
        }

(shortend that one a bit)

the other objects work just fine. As I already said it works with a hardcoded month value, so its some problem with refreshing and refilling the datatable. I also can see in the console that it is doing something, but the date doesn't change.

The same way you would update an inputText, or an outputText or... — Kukeltje, Jan 31 '20 at 11:03
You should better use `p:ajax event="change"` and add a `valueChangeListener` to the `p:selectOneMenu` which notifies `dtBillingView` it has to reload the data with new selection. And btw. `p:dataTable` does not have a `class` attribute. And `update="#{tabelContainer}"` is wrong syntax. — Selaron, Jan 31 '20 at 11:11
@Selaron: `update="#{tabelContainer}"` is not by definition wrong syntax. I use this in a (very rare) number of places too. `f:ajax` in combination with this attribute is wrong though... (as can be read in the 'duplicate') — Kukeltje, Jan 31 '20 at 11:33
@Selaron Okay I now read some documentation tried some stuff, changed the event to ```event="change"``` and added the ```valueChangeListener```. But now my problem with the Listener is that it has to refer to a MethodExpression. So I put in my code ```valueChangeListener="#{dtBillingView.init}"```, because my init methode builds the Object FoodEntry which later gets displayed in the datatable. But I think there is some problem now because the init methode is a ```@PostConstruct``` methode which comes from the primefaces datatable showcase. — Robin Hoffmann, Feb 03 '20 at 14:52
tbc I found out that the datatable doesn't update properly after I select another month, but if I select a month and then refresh the datatable by resorting it, only the month data is displayed — Robin Hoffmann, Feb 03 '20 at 14:57
ok now it kinda works i changed ```update``` to ```render``` , but the value of the OneSelectMenu is allways one step. So it don't gives the value of the new selected menupoint instead it gives the value of the point it was before the new selection — Robin Hoffmann, Feb 04 '20 at 08:40
So right here I didnt need a valuechangListener, I only needed to add a normal listener to the p:ajax and write a new methode in my bean so i don't need to call my init at every selection. ```@PostConstruct public void init() { update(); } public void update() { foodEntrys = service.createFoodEntrys(month, userId); foodPrices = service.createFoodPrice(); }``` — Robin Hoffmann, Feb 04 '20 at 13:27

How to update a datatable on a click event

0 Answers0