p:commandButton in accordionPanel-tab does not update datatable

Question

my problem is following: i have a accordionPanel with different tabs. And in one tab there is a dropdown, an input and a commandButton. And when user add something by clicking the button, an item is added to an list which should be displayed in the datatable above. And above there should be rendered another Inputfield and another button.

With JSF it worked fine, but the <h:commandButton/> updates the whole accordionpanel, closes the current and opens the first. The <p:commandButton/> was "ok" first, but it did not update anything, or the identifier was not found.

Now I even get a NullPointerException because the button triggers obviously automatically on pageload. I don't know the error. I have tried several thing, but nothing works. Can anyone help?

<p:accordionPanel id="tabPanel" header="Lebensmittel" multiple="true">
            <p:tab title="Neue Mahlzeit erstellen">
                <h:form>
                        <h:outputText value="Neue Mahlzeit erstellen: "/>
                        <br/>
                        <p:selectOneMenu value="#{kcalModel.grocPrototype}">
                            <f:converter binding="#{kcalModel.grocProtoConverter}"/>
                            <f:selectItem itemLabel="Bitte auswählen.." itemValue="" />
                            <f:selectItems value="#{kcalModel.grocPrototypes}" var="groc" itemValue="#{groc.name}"
                                           itemLabel="#{groc.name}"/>
                        </p:selectOneMenu>
                        <!--<h:inputText value="#{kcalModel.amount}"/> Gramm-->
                        <p:inputNumber value="#{kcalModel.amount}" size="5"/> Gramm

                        <p:commandButton value="+ zu neuer Mahlzeit hinzufügen" process="@form" update="form:meal" action="#{kcalModel.addGroceryToMeal()}"/>
                </h:form>

                <h:form id="meal">
                    <p:fragment>
                        <p:autoUpdate />
                        <h:dataTable id="grocs" value="#{kcalModel.meal.groceries}" var="groc">
                            <h:column>
                                <h:outputText value="#{groc.name}"/>
                            </h:column>
                            <h:column>
                                <h:outputText value="#{groc.volumeInGramm}"/>
                            </h:column>
                        </h:dataTable>

                        <h:inputText id="titel" value="#{kcalModel.meal.title}" pt:placeholder="Bezeichnung" required="true"
                                     requiredMessage="Bezeichnung fehlt." rendered="#{kcalModel.meal.groceries.size() > 0}">
                            <h:message for="titel" style="color:indianred"/>
                        </h:inputText>
                        <h:selectOneMenu value="#{kcalModel.meal.mealType}" rendered="#{kcalModel.meal.groceries.size() > 0}">
                            <f:selectItem itemLabel="Bitte auswählen.." itemValue="" />
                            <f:selectItems value="#{kcalModel.mealTypes}" var="type" itemValue="#{type}"
                                           itemLabel="#{type.toString()}"/>
                        </h:selectOneMenu>
                        <h:commandButton value="neue Mahlzeit erstellen" action="#{kcalModel.createMeal()}"
                                         rendered="#{kcalModel.meal.groceries.size() > 0}"/>
                    </p:fragment>

                </h:form>
            </p:tab>

            <p:tab title="Benutzerdefinierte Mahlzeiten" rendered="#{kcalModel.userDefinedMeals.size() > 0}">
                <h:form>
                    <p:selectOneMenu value="#{kcalModel.meal}" rendered="#{kcalModel.userDefinedMeals.size() > 0}">
                        <f:selectItems value="#{kcalModel.userDefinedMeals}" var="uMeal" itemValue="#{uMeal}" itemLabel="#{uMeal.title}"/>
                        <f:converter binding="#{kcalModel.mealConverter}"/>
                    </p:selectOneMenu>
                    <p:commandButton value="+ Mahlzeit hinzufügen" action="#{kcalModel.addMeal()}"
                                     rendered="#{kcalModel.userDefinedMeals.size() > 0}" update=":revenue, :kcals"/>
                </h:form>
            </p:tab>
        </p:accordionPanel>

With `ajax="false"` the `p:commandButton` will work as `h:commandButton`. With `p:commandButton` you need to update proper part of form. Add form id and include it in update attribute. — Vasil Lukach, Dec 20 '18 at 19:48
I added a form-id and made this: But does not work. Error: Component not found — Galadriel, Dec 21 '18 at 09:30
See the answer and https://stackoverflow.com/questions/8634156/how-to-find-out-client-id-of-component-for-ajax-update-render-cannot-find-compo — Kukeltje, Dec 21 '18 at 10:15
Now I have anouther crazy behavior: This is my Button now: and when I call the Page, I get a NullpointerException, because it seems, as if the button is triggered on his own. Has anyone noticed such behavior, too? I had the same problem with another button, too. The brackets after the method is right? — Galadriel, Dec 22 '18 at 09:48
Solved it. Commented buttons are evaluated. So delete them, or add this: javax.faces.FACELETS_SKIP_COMMENTS true — Galadriel, Dec 22 '18 at 12:06

score 0 · Accepted Answer · edited Dec 21 '18 at 10:16

First of all, you should write a Minimal, Complete and Verifiafle example and remove all the irrelevant code. Stack Overflow is not a community intended to write your code but to help you correcting your errors.

Once said that, remember to add an update attribute to the <p:commandButton/> that should update the datatable (I saw that some of your buttons doesn't have this attribute).

Also, if the component to update is in another form you should use an absolute reference to it. For example:

<h:form id="firstForm">
  <p:dataTable id="table" .........
  </p:dataTable>
</h:form>
<h:form id="secondForm">
  <p:commandButton update=":firstForm:table" ....
</h:form>

See also

How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

Thank you for your answer. I'm sorry, if you think the code is not minimal and verificable enough, but iI already deletet unrelevant parts of it. So I did not just paste it, I already thought of that. The Buttons in my code, which do not have an update attribute, do not need one, because they should not update anything, that's the reason. Nevertheless, your Link helped me very much. The Solution for me was, that I wrote the false identifier (compare named container). Just take forms and datatable ids. — Galadriel, Dec 22 '18 at 09:12

p:commandButton in accordionPanel-tab does not update datatable

1 Answers1