1
votes

I am trying to implement some functionality shown on the PrimeFaces website. The p:commandButton in the header of my p:dataTable show a p:dialog containing a series of label/text outputs. The example below works as exepected :

DataTable:

<h:form id="form">
        <p:dataTable id="table" 
                     value="#{locationStockList.getDataModel(cc.attrs.collection)}"     
                     var="item"
                     selection="#{locationStockList.selected}"
                     selectionMode="single">

            <p:ajax event="rowSelect" listener="#{locationStockList.onRowSelect}"/>

            <f:facet name="header"> 
                <p:commandButton id="btnView" value="View"
                                 update=":form:panel" 
                                 oncomplete="dialog.show()"/>
            </f:facet>
            <p:column>
                <f:facet name="header">Stock Item</f:facet>
                <h:outputText value="#{item.stockItem.name}"/>
            </p:column>
            <p:column>
                <f:facet name="header">Location</f:facet>
                <h:outputText value="#{item.location.name}"/>
            </p:column>
            <p:column>
                <f:facet name="header">Quantity</f:facet>
                <h:outputText value="#{item.quantity}"/>
            </p:column>
            <p:column>
                <f:facet name="header">Price</f:facet>
                <h:outputText value="#{item.price}"/>
            </p:column>
        </p:dataTable>

Dialog

        <p:dialog id="dialog" widgetVar="dialog" header="Location Stock Form" width="700"
                  resizable="false" draggable="false" closable="false" modal="true">
            <h:panelGrid id="panel" columns="3">
                <h:outputLabel id="lblStockItem" for="stockItem" value="Stock Item"/>
                <h:outputText id="stockItem" value="#{locationStockList.selected.stockItem.name}"/>
                <p:message id="msgStockItem" for="stockItem"/>

                <h:outputLabel id="lblLocation" for="location" value="Location"/>
                <h:outputText id="location" value="#{locationStockList.selected.location.name}"/>
                <p:message id="msgLocation" for="location"/>

                <h:outputLabel id="lblPrice" for="price" value="Price"/>
                <h:outputText id="price" value="#{locationStockList.selected.price}"/>
                <p:message id="msgPrice" for="price"/>

                <h:outputLabel id="lblQuantity" for="quantity" value="Quantity"/>
                <h:outputText id="quantity" value="#{locationStockList.selected.quantity}"/>
                <p:message id="msgQuantity" for="quantity"/>
            </h:panelGrid>

            <f:facet name="footer">
                <p:commandButton value="Save" />
                <p:commandButton value="Cancel" oncomplete="dialog.hide()" />
            </f:facet>
        </p:dialog>
    </h:form>

The problem I am experiencing is that when I try to implement the same dialog box as an edit/update panel. And change h:outputText in the p:dialog to h:inputText the textboxes are rendered empty. The only solution I have found to this problem is to set the h:inputText to disabled="true" or readonly="true", in which the values are visible but uneditable. To be specific:

These both show the values but do not permit modificaion :

<h:outputText id="price" value="#{locationStockList.selected.price}"/>
<h:inputText id="price" value="#{locationStockList.selected.price}" readonly="true"/>

While this renders empty:

<h:inputText id="price" value="#{locationStockList.selected.price}"/>
1

1 Answers

2
votes

As both the table and the dialog are inside the same form, you're actually submitting the dialog's content as well when clicking the button in the table. What you're seeing are actually the submitted values of the dialog. When readonly or disabled is set, the input values won't be submitted and thus won't override the model values.

You need either to be more specific in what the button should process (i.e. only @this)

<p:commandButton value="View" process="@this" update=":form:dialog" oncomplete="dialog.show()"/>

or to split the table and the dialog over 2 forms

<h:form>
    <p:dataTable>
        ...
    </p:dataTable>
</h:form>
<p:dialog>
    <h:form>
        ...
    </h:form>
</p:dialog>