CODEWITHSUNDEEP
jsfjsf-2primefaces
ASADUL
ASADUL

Reputation: 318

Removing of collector list in PrimeFaces is not working

I am working with PrimeFaces. I have used Collector in my code. I would like to remove one list of data by clicking remove button, but it is not working. Here I am attaching my code.

Code:

<p:tab id="superDetails" titleStyleClass="tab">
    <p:panel collapsed="3" id="superid">
        <h:panelGrid  border="0" columns="3" columnClasses="control-label" >
            <h:outputText  value="Date:" />
            <p:calendar id="superDate"  navigator="true" pattern="dd/mm/yyyy"/>
            <p:commandButton id="btn_reset" value="Reset" type="reset"/>
            <p:commandButton id="btn_add" value="Add" update="books @parent"  action="#{bean.reinit}" >
                <p:collector value="#{bean.superDetails}" addTo="#{ean.superList}"  unique="true"/>
            </p:commandButton>
        </h:panelGrid>
    </p:panel>

    <p:outputPanel id="books" style="bookstyle">
        <p:dataTable value="#{bean.superList}" var="book" id="booksTable">
            <p:column headerText="Name">
                <h:outputText value="#{book.superName}" />
            </p:column>
            <p:column headerText="CertificateNo">
                <f:facet name="header">
                    <h:outputText value="CertificateNo" />
                </f:facet>
                <h:outputText value="#{book.superNo}" />
            </p:column>
            <p:column headerText="Date Of Expiry">
                <h:outputText value="#{book.superDate}" />
            </p:column>
            <p:column headerText="Action">
                <p:commandLink value="Remove" update="@(bookstyle)" process="@this" ajax="true">
                    <p:collector value="#{bean.superDetails}" removeFrom="#{bean.superList}"  unique="true"/>
                </p:commandLink>
            </p:column>
        </p:dataTable>
    </p:outputPanel>
</p:tab>

Upvotes: 1

Views: 770

Answers (1)

Heather92065
Heather92065

Reputation: 7893

The remove operation did complete successfully on the your bean, however the page didn't update to display the altered list because the selector within the update was incorrect. Alter your commandLink to the following so the update will find the outputPanel you want updated:

<p:commandLink value="Remove" update="@(.bookstyle)" process="@this">
    <p:collector value="#{bean.superDetails}" removeFrom="#{bean.superList}"  unique="true"/>
</p:commandLink>

The only change is there is now a "." in front of the bookstyle so the jQuery selector will now look for a component with a style class of "bookstyle".

Also all PrimeFaces commandLink components default to ajax="true" so you don't need to include it in this case.

Primefaces uses the '@' symbol as a jQuery shortcut. So within the update you could also use this to select the outputPanel by its id: update="@(#books)"

If you wanted to just update the whole form use: update="@form"

To learn more about jQuery and CSS selectors follow this link: CSS Selector Reference (jQuery and CSS selectors use the same syntax.)

Here's my version of the update code with a different backing bean:

    <h:form id="exampleForm">
        <p:growl id="msgs" />

        <p:panel header="Create a new book" style="margin-bottom:20px">
            <h:panelGrid columns="2" cellpadding="5">
                <h:outputLabel value="Title : *" for="txt_title"></h:outputLabel>
                <p:inputText id="txt_title" value="#{collectorView.book.title}" required="true"/>

                <h:outputLabel value="Author : *" for="txt_author"></h:outputLabel>
                <p:inputText id="txt_author" value="#{collectorView.book.author}" required="true"/>

                <p:commandButton id="btn_reset" value="Reset" type="reset"/>
                <p:commandButton id="btn_add" value="Add" update="books msgs @parent" action="#{collectorView.reinit}" >
                    <p:collector value="#{collectorView.book}" addTo="#{collectorView.books}" unique="true"/>
                </p:commandButton>
            </h:panelGrid>
        </p:panel>

        <p:outputPanel id="books" styleClass="bookstyle">
            <p:dataTable value="#{collectorView.books}" var="book" id="booksTable">

                <p:column headerText="Title">
                    <h:outputText value="#{book.title}" />
                </p:column>

                <p:column headerText="Author">
                    <f:facet name="header">
                        <h:outputText value="Author" />
                    </f:facet>
                    <h:outputText value="#{book.author}" />
                </p:column>

                <p:column headerText="Action">
                    <p:commandLink value="Remove" update="@(.bookstyle)" process="@this">
                        <p:collector value="#{book}" removeFrom="#{collectorView.books}" unique="true"/>
                    </p:commandLink>
                </p:column>

            </p:dataTable>
        </p:outputPanel>

    </h:form>

Upvotes: 1

Related Questions