3

The following code is about a table, where I can add (commandButton) or remove (commandLink) rows. Both buttons are working and calling the correspondent bean methods. But while for each click in the add button will update the table adding one row instantly, for the remove button, I have to click it twice to get the row removed. Even though the row is not removed the first time, the bean method is being called. What should I do? Thanks!

    <h:form id="form">
        <table>
            <tr>
                <td>
                    <h:panelGrid columns="2" width="100%">
                        <p:dataTable id="univertitiesTable" value="#{universityBean.universityList}" var="university"
                            editable="true" editMode="cell" style="align:center;" >

                            <p:column headerText="Name" style="width:80px" >
                                <p:inputText value="#{university.name}" style="width:25px;" id="nameField"  label="name"  />
                            </p:column>

                            <p:column headerText="" style="width:20px; ">
                                <p:commandLink actionListener="#{universityBean.deleteUniversity}" update="univertitiesTable" id="removeButton" ajax="true">
                                    <h:graphicImage value="/resources/icones/delete.gif" />
                                    <f:setPropertyActionListener value="#{university}"
                                        target="#{universityBean.university}" />
                                </p:commandLink> 
                            </p:column>
                        </p:dataTable>

                        <p:commandButton value="+" update="univertitiesTable" id="addButton" ajax="true"
                            actionListener="#{universityBean.addUniversity}"
                            styleClass="ui-priority-primary"  />

                    </h:panelGrid>                  
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <h:commandButton id="save" value="Save"
                        action="#{universityBean.save}" binding="#{save}" />
                </td>
            </tr>
        </table>    
    </h:form>
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
qxlab
  • 1,506
  • 4
  • 20
  • 48
  • Try removing `ajax=true` from commandButton and add `process=@this` to the `commandButton` – SRy Nov 15 '13 at 21:41

1 Answers1

6

You have to use action instead of actionListener. The update is done after the action is done, so when you do not specify any action the update is done immediately. So the view will recognize that the row is deleted when you do another update; which is done when you click the link again.
Btw ajax="true" is anyways the default value for the ajax-attribute.
I.e.:

<p:commandLink action="#{universityBean.deleteUniversity}" update="univertitiesTable" id="removeButton">
  <h:graphicImage value="/resources/icones/delete.gif" />
  <f:setPropertyActionListener value="#{university}"
    target="#{universityBean.university}" />
</p:commandLink> 
user1983983
  • 4,793
  • 2
  • 15
  • 24
  • That's correct thanks a lot. I could have figured this out, but the add button was working properly with the action listener, I don't understand why it don't have the same behavior as the delete button. – qxlab Nov 16 '13 at 14:50
  • I have the same exact problem , but I don't know why this solution didn't help in my case (jsf 2.2). – Jalal Sordo Nov 21 '13 at 09:17
  • There might also be some other reasons, so check the other SO questions regarding that problem or post another question and give some details. – user1983983 Nov 21 '13 at 09:25