Prefilled p:inputText component - jsf

I am not able to display a p:dialog with prefilled values for a p:inputText component:
<p:dialog modal="true" widgetVar="editPersonDlg" header="Edit Person" width="350">
<h:form id="editPersonForm">
<h:panelGrid columns="2">
<h:outputLabel for="editFirstName" value="First Name:" />
<p:inputText id="editFirstName" value="#{personBean.selectedPerson.firstName}" />
<p:commandButton value="Save" type="Button" actionListener="#{personBean.edit}"
oncomplete="editPersonDlg.hide()"/>
<p:commandButton value="Cancel" type="Button" oncomplete="editPersonDlg.hide()"/>
</h:panelGrid>
</h:form>
</p:dialog>
When debugging I see that personBean#selectedPerson is effectively returning a not-null Person, with not-null names. Person#getFirstName is effectively returning a not-null name. However FirstName and LastName don't appear in the inputText boxes of the Dialog.

It could be beacause you don't update the dialog before you open it.
For example:
You initialize the personBean.selectedPerson by selecting it in p:dataTable and then you want to edit it by clicking on p:commandButton which opens the "edit" dialog. You have to update this dialog so the component can fetch actual data. Try something like this for the button which opens the dialog:
<p:commandButton value="Edit" oncolmplete="editPersonDlg.show()" update=":formInWhichIsDialog:dialogID" />
Let me know if it worked, problem can be somewhere else but this is the most common thing.
Hope it helped !

Related

Primefaces InputText stores previous value when present inside the Primefaces Dialog

I have a InputText inside a Dialog as:
<p:dialog header="Demo Header"appendTo="#(body)"
widgetVar="sectionDialog" id="section_Dialog"
modal="true">
<h:panelGroup id="myPanel">
<h:panelGrid columns="4">
<h:outputLabel value="Count: "/>
<pe:keyFilter mask="num" for="count" />
<p:inputText id="count"
value="#{myBean.countValue}" converter="spaceConverter">
</p:inputText>
<p:commandButton id="btnId" process="#this"
update="secondPanel" value="ADD" icon="ui-icon-check"
action="#{myBean.generateDataTableBasedOnCount()}" ajax="true"
partialSubmit="true">
</p:commandButton>
</h:panelGrid>
</h:panelGroup>
<h:panelGroup style="border:0" id="secondPanel">
...// data table generated based on Input Count.
</h:panelGroup>
</p:dialog>
If I keep the InputText and Button outside the dialog, it works like a charm.
But when I keep them inside the Dialog, myBean.countValue always stores the previous input value.
When I refresh the page and enter a new value, Old Value is being stored in the bean.
What am I missing here?
PrimeFaces : 5.3
PrimeFaces-Extension : 4.0.0
JSF : 2.2.8
You need to ResetInput of the dialog before you open it.
See: https://www.primefaces.org/showcase/ui/misc/resetInput.xhtml
So on the button that opens your dialog... Its better to reset the FORM but I didn't see the h:form in your example code above.
<p:commandButton value="Open Dialog" update="section_Dialog">
<p:resetInput target="section_Dialog"/>
</p:commandButton

use <p:commandbutton> in <p:datatable> to show a <p:dialog>

Hello I am trying to implement some primefaces commandbuttons in a p:datatable. My need is almost identical to this post:
f:setPropertyActionListener not invoked
Basically I need to have a column of buttons in a , click on one button will pass the object of the current row to the bean, and a dialog will pop out, showing some information of the chosen object.
The following is the relevant code:
<f:view>
<body>
<h:form id="theForm">
<p:dataTable id="testFailures" value="#{testDetails.report.failures}" var="failure"
styleClass="baseTable">
<p:column id="requestColumn">
<f:facet name="header">
<h:outputText value="Request" id="requestHeaderText" />
</f:facet>
<p:commandButton value="Detail" update="requestDialog"
oncomplete="PF('dlg1').show();" type="button">
<f:setPropertyActionListener
target="#{testDetails.selectedFailure}" value="#{failure}" />
</p:commandButton>
<h:message for="requestDialog" />
<p:dialog id="requestDialog" header="Request Dialog"
widgetVar="dlg1" dynamic="true">
<h:outputText value="#{selectedFailure.request}" />
</p:dialog>
</p:column>
</p:dataTable>
</h:form>
<h:message for="theForm" />
<h:message for="responseDialog" />
<p:dialog id="responseDialog" header="Request Dialog"
widgetVar="dlg2" dynamic="true">
<h:form>
<h:outputText value="#{selectedFailure.request}" />
</h:form>
</p:dialog>
</body>
</f:view>
I tried to put the dialog in different positions (see my "dlg1" and "dlg2"). But neither works. No dialog showing. does not show anything either. And I don't see any error message in the browser's console window. (I think there is a exclamation warning).
I have tried debug mode, and set method for the property "selectedFailure" is not called.
Try to remove type="button" from your commandButton and it should work. Also dialogs should not be placed inside dataTables so the position of "dlg2" is more correct.

Primefaces DataTable - deleting with dialog deletes wrong entry

I have a table in a form. One of the columns in the table displays a row of buttons to edit and delete the table entries. When I delete an entry callign the controller from a button's action attribute, it works as expected.
But once I have added a dialog to let the user confirm the deletion, a wrong entry is deleted. It is always the last entry in the current table. I have no idea what the reason could be - I am using the same DataTable var for the button and for the dialog.
I am working with JSF 2 (Mojarra 2.1.6) and Primefaces 3.5 deploying on JBoss 7.1.1 on a Suse 12.2 machine.
The form:
<h:form id="downloads">
<ui:include src="components/table.xhtml"/>
</h:form>
The table:
<ui:composition>
<p:dataTable value="#{controller.currentLevelResources}"
var="download" id="downloadTable" scrollHeight="120" rows="10">
<p:column sortBy="#{download.name}">
<f:facet name="header">Name</f:facet>
<h:outputText id="downloadName" value="#{download.name}" title="#{download.description}" />
</p:column>
...
<p:column>
<ui:include src="menuBar.xhtml"></ui:include>
</p:column>
The menu bar:
<ui:composition>
<p:commandButton id="edit"
action="#{downloadEditController.editResource(download)}"
icon="ui-icon-gear" title="Edit" oncomplete="updateStyles()"
update=":downloads" />
<p:commandButton id="delete" onclick="deletedDlg.show();"
icon="ui-icon-trash" title="Delete" oncomplete="updateStyles()" />
<p:dialog header="Delete confirmation" widgetVar="deletedDlg"
resizable="false">
<h:panelGroup layout="block" style="padding:5px;">
<h:outputText
value="The Resource #{download} will be deleted. Proceed?" />
</h:panelGroup>
<p:commandButton id="deleteBtn" value="Delete"
oncomplete="deletedDlg.hide(); updateStyles(); "
action="#{downloadEditController.deleteResource(download)}"
process="#this" update=":downloads">
</p:commandButton>
<p:commandButton value="Cancel" type="button"
onclick="deletedDlg.hide();" />
</p:dialog>
If I replace the dialog with this, everything works:
<p:commandButton id="delete" icon="ui-icon-trash" title="Delete"
action="#{downloadEditController.deleteResource(download)}"
oncomplete="updateStyles()" update=":downloads" />
Creating a <p:dialog> for every row is not a good idea.
For starters you had better create a single <p:dialog> outside your <p:dataTable>.
Next thing that I would do is to set the id or the row var in your bean upon delete button click and in case of confirmation in dialog use that id or the row var from bean to delete.
This is how your delete button could look like, set the download var in prepareDataForDeletion action and show the dialog...
<p:commandButton id="deleteConfirmation" icon="ui-icon-trash" title="Delete"
action="#{downloadEditController.prepareDataForDeletion(download)}"
onsucess="deletedDlg.show();"/>
Regarding your current anomaly: it's because all your dialogs have the same widgetVar and each next one is overriding the previously declared one all the way until the last one. You could dynamically give them a different widget names like so widgetVar="deleteDlg_#{someIndex}", but this makes no sense if you can have just only one reusable dialog whose content is updated before opening.

Primefaces: required field message overrides <p:dialog/> message

I have a field that has a required attribute. When I press the Accept button to save some data without entering any value in the field, an error message is displayed. So far so good.
But, if right after that I decide to click on the Cancel button, that error message overrides the confirmation message that is supposed to be displayed inside a <p:dialog/> element.
NOTE: If instead I use the <p:confirmDialog/> component, there seems to be no problem because, I guess, it uses a message="" attribute, no the <p:messages/> tag.
XHTML
<p:dialog>
<p:outputPanel>
<h:form>
<h:outputText value="Field:"/>
<p:inputText id="field" value="" type="text" required="true" requiredMessage="You must complete the field" />
<p:growl id="messages" showDetail="true"/>
<p:commandButton id="dialogCancel" value="Cancel" oncomplete="confirmCancelDialog.show();" actionListener="#{controller.addCloseWarn}" />
</h:form>
</p:outputPanel>
</p:dialog>
<h:form>
<p:dialog id="confirmCancelDialog" header="Warning!" widgetVar="confirmCancelDialog" modal="true" >
<p:messages id="closeMessage" showDetail="true" autoUpdate="true" />
<p:commandButton id="confirm" value="Accept" onclick="..." />
<p:commandButton id="decline" value="Cancel" onclick="..." />
</p:dialog>
</h:form>
Bean controller
public void addCloseWarn(ActionEvent actionEvent) {
FacesContext.getCurrentInstance().addMessage("closeMessage", new FacesMessage(FacesMessage.SEVERITY_WARN, null,
"Are you sure you want to leave the page?"));
}
Problem with Cancel button is that your form is submitted and validation is executed. You can add process="#this" attribute to commandButton, so other parts of form will not be processed and your addCloseWarn method will be executed.
I would also add that this is probably not standard use of message tag. It is used to show errors, warning and successful messages, not confirmation questions. So use confirmDialog or use standard dialog with just ordinary text and OK - Cancel buttons.

How to only show dialog after successfully validated text field

So I have form with 1 fields that need to be required
<h:form id="form">
<h:panelGrid columns="2">
<h:inputText id="default" requiredMessage="This field is required."
value="#{displayName.name}" required="true" />
<p:message for="default"/>
</h:panelGrid>
<p:commandButton value="Test" update="form" onclick="displayDlg.show();"/>
</h:form>
<p:dialog header="Dialog" widgetVar="displayDlg" id="dialog">
<h:outputText value="The name you just input is: #{displayName.name}"/>
</p:dialog>
So when I click button Test, and not having anything inside the text-box, then an error message pop out.
I want that if the validation process success, then I want to display a dialog box that display name that you just type in. But if validation fail, then dont diplay the dialog. And I have a hard time making this happen. I try to put the dialog inside or outside the dialog, but no work. Please give me some advice
You could make use of the visible attribute of <p:dialog> and ajax-update the whole dialog.
<h:form id="form">
<h:panelGrid columns="2">
<h:inputText id="default" requiredMessage="This field is required."
value="#{displayName.name}" required="true" />
<p:message for="default"/>
</h:panelGrid>
<p:commandButton value="Test" update="form :dialog" />
</h:form>
<p:dialog id="dialog" header="Dialog" visible="#{not empty displayName.name}">
<h:outputText value="The name you just input is: #{displayName.name}"/>
</p:dialog>
Additional benefit of having :dialog in the update is that it will update the entered name as well everytime you change it.

Resources