I use JSF PrimeFaces 6.1 version
I have confirmDialog for several commandButton looks like
<p:commandButton id="applyButton" icon="icon-interaction-upload-3"
styleClass="icon-button edit-panel-apply main-button"
rendered="#{Bean.editMode}"
onclick="setMainButtonYes(); $('[id$=hiddenApplyButton]').click(); return false;"
title="Apply"/>
<p:commandButton id="hiddenApplyButton"
actionListener="#{Bean.save}"
style="display: none"
onstart="saveScrollPosition();blockUi('blockUI')"
oncomplete="unblockUi('blockUI');setScrollPosition();">
<p:confirm header="Blablabla"
message="Apply"
icon="ui-icon-alert"/>
</p:commandButton>
<p:commandButton id="discardButton" icon="icon-interaction-remove-2"
styleClass="icon-button edit-panel-discard" rendered="#{Bean.editMode}"
title="Discard"
onclick="setMainButtonNo(); $('[id$=hiddenDiscardButton]').click(); return false;"/>
<p:commandButton id="hiddenDiscardButton"
actionListener="#{Bean.discardChanges}"
style="display: none"
onstart="saveScrollPosition();blockUi('blockUI')"
oncomplete="unblockUi('blockUI');setScrollPosition();">
<p:confirm header="Blablabla"
message="Discard"
icon="ui-icon-alert"/>
</p:commandButton>
<p:confirmDialog id="confirmationDialog" global="true" closeOnEscape="true">
<p:commandButton id="yes" value="Yes"
styleClass="ui-confirmdialog-yes edit-confim-yes yesButtonUpdate"
onstart="saveScrollPosition();" oncomplete="setScrollPosition();"
icon="ui-icon-check"/>
<p:commandButton id="no" value="No"
styleClass="ui-confirmdialog-no edit-confim-no noButtonUpdate main-button"
onstart="saveScrollPosition();" oncomplete="setScrollPosition();"
icon="ui-icon-close"/>
</p:confirmDialog>
For Apply button when the dialog opened pressing Enter works right and saves changes, but in second case for discard button i want the Enter button to close the dialog without discarding changes.
I tried to add defaultCommand tag but it doesnt work. How can i set Enter for "no" commandButton in second case?
P.S.
setMainButtonYes/No() function just add needed class to buttons to paint them.
Not a solution as you'd expect, but with the limitations of confirmDialog maybe the only option would be to change the order of the buttons so that the first button was the default command:
<p:confirmDialog id="confirmationDialog" global="true" closeOnEscape="true">
<p:commandButton id="no" value="No" />
<p:commandButton id="yes" value="Yes"/>
</p:confirmDialog>
Related
I'm currently implementing a data table with a delete function in prime faces. Before deleting the user confirms his decision inside a dialog: if it's a "yes", then the "current" row (aka on which the user clicked the delete button) should be deleted. Currently the last row gets deleted irrespectable of on which row delete action has been triggered:
<p:dataTable var="var" value="#{bean.list}">
//some columns
//relevant column
<p:column id="id">
<p:commandButton id="deleteButton" onclick="PF('deleteDialog').show();" />
<p:confirmDialog id="deleteDialogId" widgetVar="deleteDialog" appendTo="#form">
<p:commandButton id="confirm" onclick="PF('deleteDialog').hide();"
actionListener="#{bean.deleteRowAction(var)}" />
<p:commandButton id="cancel" onclick="PF('deleteDialog').hide();" />
</p:confirmDialog>
</p:column>
</p:dataTable>
It seems like the actionListener of confirm button cannot access the current row by only getting var as an input. If I get rid of the dialog and trigger the action listener on deleteButton instead, everything works as expected:
// works, but no dialog
<p:dataTable var="var" value="#{bean.list}">
//some columns
//relevant column
<p:column id="id">
<p:commandButton id="deleteButton" actionListener="#{bean.deleteRowAction(var)}" />
</p:column>
</p:dataTable>
I have found How can I pass selected row to commandLink inside dataTable or ui:repeat? as well as JSF Delete entity on DataTable with p:dialog but unfortunately it didn't help.
Is there a way to somehow pass "the current" table entry onto an external button?
There is an easier way to do this, by using the p:confirmDialog. This allows you to simply add p:confirm to your p:commandButton and you're done:
<h:form>
<p:dataTable var="var" value="#{bean.list}">
<p:column id="id">
<p:commandButton id="deleteButton"
action="#{bean.deleteRowAction(var)}">
<p:confirm header="Confirmation"
message="Are you sure?"
icon="pi pi-exclamation-triangle" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:confirmDialog global="true">
<p:commandButton value="Yes" type="button"
styleClass="ui-confirmdialog-yes" icon="pi pi-check" />
<p:commandButton value="No" type="button"
styleClass="ui-confirmdialog-no" icon="pi pi-times" />
</p:confirmDialog>
</h:form>
I just use confirm right inside the column:
<p:dataTable var="item" ...
<p:column headerText="Item">
<p:commandButton action="#{myBean.deleteItem(item)}">
<p:confirm header="Confirmation" message="Delete item?" icon="ui-icon-alert"/>
</p:commandButton>
</p:column>
I have this working button in a p:dataTable
<p:commandButton update=":dialog" oncomplete="PF('dialog').show()" title="Do something">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
</p:commandButton>
It sets the selectedTx in the model so that I can do stuff with it in the dialog.
Now I want to add a new functionality to my button, so I chose a p:splitButton:
<p:splitButton update=":dialog" oncomplete="PF('dialog').show()" title="Do something">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
<p:menuitem value="Do something else" oncomplete="PF('otherDialog').show()" update=":otherDialog" />
</p:splitButton>
When I use the new button, the selectedTx is not set. Only the first button works.
How to update my property in the model when the new button is clicked ?
The solution was to add the setPropertyActionListener inside of the menuitem (as Apostolos suggested), and the datatable needed to be updated (instead of only the dialog):
<p:splitButton update="datatable :dialog" oncomplete="PF('dialog').show()" title="Do something">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
<p:menuitem value="Do something else" oncomplete="PF('otherDialog').show()" update="datatable :otherDialog">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
</p:menuitem>
</p:splitButton>
<p:selectOneMenu id="country" value="#{empCon.selectedCountry}" required="true" onchange="PF('confirm').show()">
<f:selectItem itemLabel="-SELECT-" itemValue="NULL" noSelectionOption="true"></f:selectItem>
<f:selectItems value="#{empCon.country}"
var="a"
itemLabel="#{a}"
itemValue="#{a}"></f:selectItems>
</p:selectOneMenu> <p:confirmDialog widgetVar="confirm" appendToBody="false" message="Are you sure you want to change your selection?" header="Confim" severity="alert">
<h:form>
<p:commandButton value="Yes" process=":te:country" update=":te:province :te:messages"
actionListener="#{empCon.onSelectCountry}"
oncomplete="PF('confirm').hide()" />
<p:commandButton value="No" type="button" onclick="PF('confirm').hide()" />
</h:form>
With this code "onSelectCountry" actionListener is not fired. But if i update process attribute's value to only the form id( ":te") it works. Please answer; i just want to know the root cause.
I have a Dialog to input details. At the first time , InputText are empty.
But from the second input, InputText maintain the previous value.
This is my code :
<p:commandButton id="showDialogButton1" type="button" value="add" onclick="dlg1.show()" update="firstname1"/>
<p:dialog id="dialogAjout" header="add department" widgetVar="dlg1" resizable="false">
<h:panelGrid columns="2" style="margin-bottom:10px">
<h:outputLabel for="firstname1" value="Libellé :" />
<p:inputText id="firstname1" value="#{departementBean.departement.libelleDepartement}" />
</h:panelGrid>
<p:commandButton id="submitButton1" value="Valider" oncomplete="dlg1.hide();" action="#{departementBean.addDept()}" update="tabView"/>
</p:dialog>
How can I resolve this, please !!
You can use this primefaces component:
http://www.primefaces.org/showcase/ui/misc/resetInput.xhtml
Regarding dialogs in general: don't put them inside forms.
Have this instead: <p:dialog><h:form>...
Regarding update="" values, if your appendToBody is true, put a colon in front of the id (that means it`s in another form).
You should use the following code:
<h:commandButton value="Reset" style="margin-right:20px;">
<p:ajax update="registrationForm" resetValues="true" />
</h:commandButton>
Add resetValues="true" to your commandButton
<p:commandButton resetValues="true" action="#{departementBean.prepareDialog}" id="showDialogButton1" type="button" value="add" oncomplete="dlg1.show()" update=":dialogAjout"/>
modify you open button like this : open dialog in oncomplete and before that update it by adding its id to update attribute and add action method to do the server side logic to actually init the dialog fields (populate / reset)
<p:commandButton action="#{departementBean.prepareDialog}" id="showDialogButton1" type="button" value="add" oncomplete="dlg1.show()" update=":dialogAjout"/>
b.t.w it looks like your dialog located inside your form together with your opening button , this is a "bad practice" move your dialog away from that form and place a new form inside the dialog , e.g <p:dialog><h:form> ...
I solved this question thus
<p:dialog header="myDialog" widgetVar="dlg1" minHeight="40">
<h:outputLabel for="fild1" value="Fill the field" />
<p:password id="fild1" value="#{myBean.attribute}" required="false" label="Field" redisplay="false" /><br />
<p:commandButton action="#{myBean.method()}" value="Send" oncomplete="dlg1.hide()" update="field1" />
</p:dialog>
When I used the attribute update="field1" of p:commandButton.
The value of field p:password will empty after submitting the form.
I tried do the suggestion of Dani but my attribute going empty when I submitted my form and not stayed empty after submit
Is there a way to make it so that when I click a p:button a hidden p:panel appears and is hidden again the next time that it is rendered?
<h:commandButton id="saveButton" value="save" oncomplete="cartComplete.show();">
</h:commandButton>
<p:panel widgetVar="cartComplete">
Shopping Cart Saved
</p:panel>
Try this...
<p:commandButton value="Save" action="#{myBean.setPanelVisibility}" update=":myForm:myPanel"/>
<p:panel id="myPanel" rendered="#{myBean.renderPanel}"/>
In the bean toggle the renderPanel attribute.
Here you go...
<h:body>
<h:form prependId="false">
<p:panel id="myPanel" style="display:none">
Shopping Cart Saved
</p:panel>
<p:commandButton id="show" value="show" onclick="jQuery('#myPanel').show()">
</p:commandButton>
<p:commandButton id="hide" value="hide" update="myPanel">
</p:commandButton>
</h:form>
</h:body>
explanation : style="display:none" make the panel be hidden, and whenver you want to display it use jquery (which comes already with primefaces) .show() function, and finally the update="myPanel" of the second command button will re-render the panel , and it will be hidden again...
Update
Same idea just with styleClass, use styleClass="hide" (instead of style="display:none")
where in your css
.hide {
display:none;
}
in java class
private String renderPanel = "false";
<p:commandButton value="Save" action="#{myBean.setPanelVisibility}" update="myPanel"/>
<p:panel id="myPanel" rendered="#{myBean.renderPanel=='true'}"/>