How to update value in p:dialog and display in the p:dialog - primefaces

I have a datatable, and at the last column I will have an edit action, it will trigger the dialog box. However, I found the value in the dialog box is not updated. Can anybody to help on this?
My code as below. In fact the bean.currentItem.name and bean.currentItem.age should base on my selection from the table. I check the bean.currentItem is not null and is refer to my selection from preEdit method, but the value never show up in p:dialog.
<p:dataTable ....>
<p:column...
<p:column...
<p:column>
<f:facet name="header">
<h:outputLabel value="Update" />
</f:facet>
<p:remoteCommand name="preEdit" action="#{bean.preEdit}"
process="#this" update="#this #form:dlg">
<f:setPropertyActionListener target="#{bean.currentItem}"
value="#{thisItem}" />
</p:remoteCommand>
<p:commandLink styleClass="no-decor"
oncomplete="preEdit();PF('dlg').show();" value="Edit"/>
</p:column>
</p:dataTable>
<p:dialog header="#{lbl.tt_cat_upd}" widgetVar="dlg" id="dlg"
resizable="false" >
<h:outputLabel value="#{bean.currentItem.name}" />
<h:outputLabel value="#{bean.currentItem.age}" />
</p:dialog>

How about removing your p:remoteCommand and let your p:commandLink do all the work for you?
Assuming you have a h:form surrounding both your dataTable and your dialog
<p:commandLink action="#{bean.preEdit}" process="#this" update="dlg" styleClass="no-decor" oncomplete="PF('dlg').show()" value="Edit">
<f:setPropertyActionListener target="#{bean.currentItem}"
value="#{thisItem}" />
</p:commandLink>
If your dataTable is not in the same form with your dialog, you might replace update="dlg" by update=":formIdContainingDialog:dlg"

Related

p:dataTable AutoComplete and ColumnToggler combination

When using autoComplete and columnToggler within a dataTable, I get a broken column-list in the column toggler.
That means, the column-list doesn't show the column-names but some javascript code instead (for each column).
Here is an example:
<p:commandButton id="showColsButton" type="button" value="Show Columns" />
<p:columnToggler datasource="myDataTable" trigger="showColsButton" />
<p:dataTable id="myDataTable" var="row" ...>
<p:column sortBy="#{row.myCol1}">
<f:facet name="header">
<div><h:outputText value="My Column 01" /></div>
<p:autoComplete ...>
<p:ajax event="itemSelect" update="myDataTable" />
</p:autoComplete>
</f:facet>
<h:outputText value="#{row.myCol1}" />
</p:column>
</p:dataTable>
Is this a bug or is there any solution for this specific problem?
Putting an input in the header facet is not valid. If you want to use it as a filter or something, put it in a f:facet name="filter".
<p:dataTable id="myDataTable" var="row" ...>
<p:column filterBy="#{row.myCol1}" sortBy="#{row.myCol1}">
<f:facet name="header">
<div><h:outputText value="My Column 01" /></div>
</f:facet>
<f:facet name="filter">
<p:autoComplete ...>
<p:ajax event="itemSelect" update="myDataTable" />
</p:autoComplete>
</f:facet>
<h:outputText value="#{row.myCol1}" />
</p:column>
But you might need to improve on the way the filter is used by not using the p:ajax but use an onchange=PF('dataTableWidget').filter(), adding a widgetVar attribute and adding filter attributes
See also
PrimeFaces showcase dataTable filter

f:setPropertyActionListener not setting the property in p:datatable

SOLUTION
Long story short, "not empty #{pastTxModel.currentTx.xml}" should be "#{not empty pastTxModel.currentTx.xml}". Yeah, I know...
UPDATE
The problem is here:
<p:inputTextarea id="test" value="#{pastTxModel.currentTx.xml}" rendered="not empty #{pastTxModel.currentTx.xml}"></p:inputTextarea>
Long story but the solution is -
Part 1-
<h:form id="alltxform">
<p:dataTable id="tablealltx" var="transaction" value="#{transactionListModel.txList}">
<p:column>
<p:commandButton update=":alltxform:xmlDetail" action="#{transactionListModel.setSelectedTx(transaction)}">
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog header="Detail" widgetVar="dialog">
<p:outputPanel id="xmlDetail">
<p:inputTextarea id="test" value="#{pastTxModel.currentTx.xml}" rendered="not empty #{pastTxModel.currentTx.xml}"></p:inputTextarea>
</p:outputPanel>
</p:dialog>
</h:form>
Then Change -
<p:inputTextarea id="test" value="#{pastTxModel.currentTx.xml}" rendered="not empty #{pastTxModel.currentTx.xml}"></p:inputTextarea>
To -
<p:inputTextarea id="test" value="#{pastTxModel.currentTx.xml}" rendered="#{not empty pastTxModel.currentTx.xml}"></p:inputTextarea>
You need to update the whole dialog after clicking on the button.
<p:commandButton update=":alltxform:Detail" oncomplete="PF('dialog').show()">
<f:setPropertyActionListener value="#{transaction}"
target="#{transactionListModel.selectedTx}" />
</p:commandButton>

Primefaces datatable required fields not work

I would create a check input information about specified in:
http://www.primefaces.org/showcase/ui/message/messages.xhtml
I create a dataTable with a lot required field (inputText with attribute required="true") and a p:message into datatable section.
Problem is when I click on button to save data: I don't see alert message in my page but starting execution of associated bean.
Why?
My code in .xhtml is this:
<h:form>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
<p:dataTable var="myAtt"
value="#{myBean.attributes}"
rowIndexVar="myAttIndex">
<h:inputHidden value="#{myAtt.value}" rendered="#{myAtt.description == 'XXX'}" />
<p:column rendered="#{myAtt.description == 'XXX'}">
<h:outputText value="*" rendered="#{myAtt.required}" />
</p:column>
<p:column rendered="#{ myAtt.description == 'YYY'">
<p:fragment rendered="#{myAtt.description == 'ZZZ'">
<p:fragment rendered="#{myAtt.value == 'value1'}">
<p:inputText size="#{myAtt.maxLength}"
value="#{myAtt.value}"
rendered="#{myAtt.const == 't1'}"
required="true"
id="idText">
<p:ajax process="#this" event="change" update="#form"/>
</p:inputText>
<p:message for="idText"/>
</p:fragment>
</p:fragment>
</p:column>
</p:dataTable>
<br />
<p:commandButton value="Create" action="#{myBean.commit()}" process="#this" update=":MYPAGE"/>
Thanks.
You forgot to indicate an id for the h:form : <h:form id="myForm">
And in the update of the p:commandButton you have to indicate the id of the form : update=":MYPAGE :myForm"
EDIT
According to the PrimeFaces users guide 3.5, the attribute action will be called when the user clicks on the button.

How to Update outputpanel from commandbutton which is inside the datatable using primefaces

Commandbutton with id("myButtonId2") works fine. I mean it updates "myOutputPanel"
but commandbutton(myButtonId) which is inside datatable doesn't update outputPanel. I found the suggestions and tried with the following,
update=":myForm:myOutputPanel"
update="#myForm"
update=":myOutputPanel"
But none of them worked...
Here is the snippet...
<h:form id="myForm" prependId="false">
<p:panel id="myPanel">
<p:dataTable id="myDatatable">
<p:column style="width:4%">
<p:commandButton id="myButtonId" actionListener="#{bean.showPanel}" update="myOutputPanel"/>
</p:column>
</p:dataTable>
<p:commandButton id="myButtonId2" update="myOutputPanel"/>
</p:panel>
<p:outputPanel id="myOutputPanel" rendered="#{bean.show}">
//some stuff
</p:outputPanel>
Try to put your <p:outputPanel /> inside a <p:panel />
and add a "widgetVar" attribute
For example : <p:panel widgetVar="var" [..]>
and just update the panel directly with update="#widgetVar(var)"

Primefaces:text field is not updated when dialog hides

Im trying to update text field from dialog box .The text field is in the parent component. But its not happening . If i give the id of text field in the update of command button . I encountered the error :
javax.faces.FacesException: Cannot find component with identifier "customerCode" referenced from "tabView:lkpSltRec"
Since it is not able to find the component id . I have used the alternative . I have taken the hidden field .After command button is clicked , the hidden field gets updated and through simple javascript function im updating the text field of parent component .The javascript function is called from oncomplete of command button in the dialog box. Since ,as per project requirement i have to achieve it through primefaces only not through javascript . Plz, suggest me the approach in primefaces . Below is the code snippet:
Here ecap:lookup is the the customize component.
Selected Customer <p:inputText id="customerCode"
value="#{sixthTabBBean.customerName}" label="Selected Adddress"></p:inputText>
Selected Customer City <p:inputText id="selectedCity" value="#{sixthTabBBean.customerCity}" ></p:inputText>
<ecap:lookup lookupId="LOV0072" inputId="customerCode" clickStatus="city"
defaultDDValueIndex="0" title="CustomerCode"></ecap:lookup>
New LOV <ecap:lookup lookupId="LOV0092" inputId="customerCode" clickStatus="none"
defaultDDValueIndex="0" title="CustomerCode"></ecap:lookup>
City<p:inputText id="custCity" value="#{sixthTabBBean.customerCity}"
disabled="true" label="City"></p:inputText>
Selected Customer <p:inputText id="customerCode1"
value="#{sixthTabBBean.customerName}" label="Selected Adddress" ></p:inputText>
Selected Customer City <p:inputText id="selectedCity1" value="#{sixthTabBBean.customerCity}" ></p:inputText>
Selected Customer State <p:inputText id="selectedSate1" value="#{sixthTabBBean.customerState}" ></p:inputText>
<ecap:lookup lookupId="LOV0098" inputId="customerCode" clickStatus="state"
defaultDDValueIndex="0" title="CustomerCode"></ecap:lookup>
<p:dialog id="lkpDialog" widgetVar="lpDialogVar" header="Lookup"
modal="true" width="1000" height="600"
rendered="#{lookupSearch.popupRender}" >
<h:form rendered="#{lookupSearch.popupRender}" prependId="false">
<h:panelGrid cellpadding="10" id="diaFrmId">
<p:dataTable id="newfdt" var="flxSearch"
value="#{lookupSearch.lkpSearchCriteriaList}">
<p:column id="newwhc">
<f:facet name="header">
<h:outputLabel value="Search Fields"></h:outputLabel>
</f:facet>
<p:selectOneMenu styleClass="fdd180" id="newwdd"
value="#{flxSearch.searchCriterion.whereClause}">
<f:selectItems value="#{flxSearch.whrClausDropdown}" />
</p:selectOneMenu>
</p:column>
<p:column id="newcoc">
<f:facet name="header">
<h:outputLabel value="Conditions"></h:outputLabel>
</f:facet>
<p:selectOneMenu id="newco" styleClass="fdd95"
value="#{flxSearch.searchCriterion.operator}">
<f:selectItems id="newcriOperatorItms"
value="#{flxSearch.operatorDropdown}" />
</p:selectOneMenu>
</p:column>
<p:column id="newcic">
<f:facet name="header">
<h:outputLabel value="Value"></h:outputLabel>
</f:facet>
<p:inputText id="newcriInpNm"
rendered="#{!flxSearch.inputDate and !flxSearch.boolValue and !flxSearch.required}"
styleClass="285 ftb" deferChangeEvent="true"
value="#{flxSearch.searchCriterion.value}"
maxlength="#{flxSearch.maxLength}"
disabled="#{flxSearch.disableInput}" partialSubmit="true"
labelValue="#{flxSearch.searchCriterion.label}"
required="#{flxSearch.required}">
</p:inputText>
<p:inputText id="newcriInpM"
rendered="#{!flxSearch.inputDate and !flxSearch.boolValue and flxSearch.required }"
value="#{flxSearch.searchCriterion.value}"
maxlength="#{flxSearch.maxLength}"
disabled="#{flxSearch.disableInput}"
labelValue="#{flxSearch.searchCriterion.label}"
required="#{flxSearch.required}">
</p:inputText>
<p:selectOneMenu styleClass="fdd" id="newbldd"
value="#{flxSearch.searchCriterion.value}"
disabled="#{flxSearch.disableInput}"
rendered="#{flxSearch.boolValue }">
<f:selectItems value="#{flxSearch.booleanDropdown}" />
</p:selectOneMenu>
<p:calendar id="newcriDtNm" size="9"
rendered="#{flxSearch.inputDate and !flxSearch.boolValue and !flxSearch.required }"
disabled="#{flxSearch.disableInput}" showOn="button"
value="#{flxSearch.searchCriterion.value}"
labelValue="#{flxSearch.searchCriterion.label}">
</p:calendar>
<p:calendar id="newcriDtM" size="9"
rendered="#{flxSearch.inputDate and !flxSearch.boolValue and flxSearch.required }"
disabled="#{flxSearch.disableInput}"
value="#{flxSearch.searchCriterion.value}"
enableChangeDetector="false" partialSubmit="true"
labelValue="#{flxSearch.searchCriterion.label}"
required="#{flxSearch.required}" showOn="button">
</p:calendar>
</p:column>
</p:dataTable>
<!-- hidden text used to update values in the parent component -->
<p:inputText type="hidden" id="hiddencustomerCode"
value="#{sixthTabBBean.customerName}" ></p:inputText>
<p:inputText type="hidden" id="hiddencustCity"
value="#{sixthTabBBean.customerCity}" ></p:inputText>
<p:inputText type="hidden" id="hiddencustState"
value="#{sixthTabBBean.customerState}" ></p:inputText>
<p:fieldset legend="Combined By">
<h:panelGrid columns="2" cellpadding="10">
<p:selectOneRadio id="newSlctDrk"
valueChangeListener="#{lookupSearch.getSelectedLogOpr}"
value="#{lookupSearch.selLogOpr}"
title="Combine all search criteria with AND or OR">
<f:selectItems id="newSlctDrkItms"
value="#{lookupSearch.logicalOperators}" />
</p:selectOneRadio>
</h:panelGrid>
</p:fieldset>
<h:panelGrid columns="3">
<p:commandButton value="Find" id="lkpfndDg" update="resultFldSet"
actionListener="#{lookupSearch.search}">
</p:commandButton>
<p:commandButton value="Clear" id="lkpClearDg"
actionListener="#{lookupSearch.clear}" />
</h:panelGrid>
<p:fieldset legend="Result" id="resultFldSet">
<p:dataTable binding="#{lookupSearch.lkpResultDataTable}"
value="#{lookupSearch.searchResultsForPage}"></p:dataTable>
</p:fieldset>
<p:commandButton value="Select" id="lkpSltRec" update="customerCode"
oncomplete="lpDialogVar.hide();insertSelectedValue();"
actionListener="#{lookupSearch.selectValue}" />
</h:panelGrid>
</h:form>
</p:dialog>
</h:panelGrid>
Here ecap:lookup is the customize component.
Finally, i have got the solution . The exception i have encountered is because of the form tag . The ajax event fired from the dialog is not able to find the component outside the form .In this case use:
:#{p:component('componentId')}
Here it will search the id not only within the form but outside of it.