CODEWITHSUNDEEP
ajaxjsfprimefaces
Anton
Anton

Reputation: 1419

Table disappears after cell edit in primefaces (also data not saved)

I have an input field and a table on page. Whenever a number in a field changes (ajax listener to change event) - I want number of rows to change accordingly.

I pointed the table to an Arraylist in a Backing bean, and play with its size.

But then when I edit a value in the table - and press enter, the table disappears, and reappears only when I change field value again.

As a bonus, in debug mode, I see that backing arraylist always have empty values.

Here goes the Bean code:

@ManagedBean(name = "bean")
@ViewScoped
public class TestBean {

    private List<String> hostnames = new ArrayList<String>();

    private int copiesQuantityJustCopy;

    public int getCopiesQuantityJustCopy() {
        return copiesQuantityJustCopy;
    }

    public void setCopiesQuantityJustCopy(int copiesQuantityJustCopy) {
        this.copiesQuantityJustCopy = copiesQuantityJustCopy;
    }

    public List<String> getHostnames() {
        return hostnames;
    }

    public void setHostnames(List<String> hostnames) {
        this.hostnames = hostnames;
    }

    public void onUpdateCount() {
        int hostnamesCount = hostnames.size();
        System.out.println("delta = " + hostnamesCount + " - " + copiesQuantityJustCopy);
        int delta = hostnamesCount - copiesQuantityJustCopy;
        if (delta > 0)
            for (int i = 1; i < delta; i++)
                hostnames.remove(delta);
        if (delta < 0)
            for (int i = 0; i < -delta; i++)
                hostnames.add("");
    }
}

and the view code:

<h:form id="form1">
    <p:inputMask mask="9?99" maxlength="3" placeHolder=" " value="#{bean.copiesQuantityJustCopy}">
        <p:ajax event="change" listener="#{bean.onUpdateCount()}" update=":form1:hostnamesTable" />
    </p:inputMask>

    <p:outputPanel id="hostnamesTable" rendered="true">
        <p:dataTable value="#{bean.hostnames}" var="hostname" 
            id="hostnames" editable="true" editMode="cell">

            <p:ajax event="cellEdit" update=":form1:hostnamesTable" process="@this" />

            <p:column>
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{hostname}" />
                    </f:facet>

                    <f:facet name="input">
                        <p:inputText value="#{hostname}" style="width:96%" />
                    </f:facet>
                </p:cellEditor>
            </p:column>

        </p:dataTable>
    </p:outputPanel>
</h:form>

Upvotes: 3

Views: 1292

Answers (1)

Bender
Bender

Reputation: 647

I think my answer won't help @Anton, but it may be helpful to another "stackers" facing same problem.

My problem is similar (dataTable dissapears when cellEdit event is completed). In my case the cause was the table update performed by ajax. Since I realy don't need table update after listener firied I simply removed update attribute and now everything works good to me.

Upvotes: 3

Related Questions