I have an inputTextArea in a dialog and wanted that the bean property shouldn't be sent/changed when the user clicks on the cancel button, but it does.
<p:dialog header="Notizen" id="paketNotizenDialog" modal="true"
widgetVar="paketNotizenDialogWV">
<h:form>
<p:panelGrid columns="1">
<p:inputTextarea scrollHeight="200" rows="6" cols="33" autoResize="false"
value="#{paketErstellenDialogController.selectedPaket.notiz}" />
</p:panelGrid>
<p:commandButton value="Save" process="#form" oncomplete="PF('paketNotizenDialogWV').hide();"/>
<p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();" process="#none" update="#none" />
</h:form>
</p:dialog>
The button which opens the dialog:
<p:commandButton id="notizEintragButton" value="T" process="#this"
onclick="PF('paketNotizenDialogWV').show();" />
Any hints? Thanks in advance.
As you are using the commandButton, the default behaviour would be to submit the enclosing form with ajax request.
I suspect what you want to do here is to reset the form input and close the dialog. In that case you should go for the type="reset" which according to the primefaces doc:
Reset buttons do not submit the form, just resets the form contents.
And once that is done, trigger your closing javascript code:
<p:commandButton value="Cancel" type="reset"
onclick="PF('paketNotizenDialogWV').hide();"/>
If you do not want to reset the form, just close the dialog then use:
<p:commandButton value="Cancel" type="button"
onclick="PF('paketNotizenDialogWV').hide();"/>
Which according to the primefaces doc would:
Push buttons are used to execute custom javascript without causing an
ajax/non-ajax request. To create a push button set type as "button"
Update
If you want to reset the values from the backing bean then use reset input fields functionality of primefaces.
In your case it would be something like:
<p:panelGrid columns="1">
<p:inputTextarea id="input" scrollHeight="200" rows="6" cols="33" autoResize="false"
value="#{paketErstellenDialogController.selectedPaket.notiz}" />
</p:panelGrid>
<p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();"
process="#this" update="input" >
<p:resetInput target="input" />
</p:commandButton>
just add type="button" and remove process="#none" update="#none"
from <p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();" process="#none" update="#none" />
Related
I have a simple page with data table. Above the table theres a button to add a new table row. This button opens up a pop up form with the registration form. The object which is being created in that form has a bean validation set. Now when I submit an invalid form, the data is not added, a message is created and the pop up window is closed.
My problem is that I want to keep the pop up window open in case the validation is not passed.
The pop up window code:
<p:dialog header="New company registration" widgetVar="cmpRegDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="cmpRegistration" style="text-align:center;">
<h:panelGrid id="cmpRegistrationGrid" columns="3" columnClasses="label,value" cellpadding="5">
<p:outputLabel for="cmpNameR" value="Name:"/>
<p:inputText id="cmpNameR" value="#{companyBean.newCompany.name}" />
<p:message for="cmpNameR" />
<p:outputLabel for="cmpAddressR" value="Address:"/>
<p:inputText id="cmpAddressR" value="#{companyBean.newCompany.address}" />
<p:message for="cmpAddressR" />
<p:outputLabel for="cmpIcoR" value="ICO:"/>
<p:inputText id="cmpIcoR" value="#{companyBean.newCompany.ico}" />
<p:message for="cmpIcoR" />
<p:commandButton value="Submit" styleClass="secondary-btn flat" action="#{companyBean.registerNewCompany()}" update=":companyRegistrationForm :companiesOverviewForm"/>
<p:commandButton value="Reset" update="cmpRegistrationGrid" process="#this" style="margin-right:10px; width: auto;" styleClass="indigo-btn" >
<p:resetInput target="cmpRegistrationGrid" />
</p:commandButton>
</h:panelGrid>
</p:outputPanel>
</p:dialog>
Yep just add this to your "Submit" button oncomplete="if (!args.validationFailed) PF('#cmpRegDialog').hide();"
<p:commandButton value="Submit"
styleClass="secondary-btn flat"
action="#{companyBean.registerNewCompany()}"
update=":cmpRegistration :companiesOverviewForm"/>
oncomplete="if (!args.validationFailed) PF('#cmpRegDialog').hide();"
Basically only close the dialog if there was no validation failure. NOTE: Make sure not to update="" the form enclosing the dialog or else your dialog will close every time. You should only update the panel inside the dialog "cmpRegistration" like I have done above.
I am trying to do a deactivation method, which will show the status ("DEACTIVATED","ACTIVATED") of the account on the commandbutton, and when i clicked on the commandButton, it will either activate or deactivate the account based on the current status. Once I confirm, the commandButton will be immediately updated to its current status.
I have the following code and I would like to update my commandButton after completion of my actionlistener in "confirmDeactivateDialog" or "confirmActivateDialog". I tried using update="a,b" at those two confirmDialog tag but it doesn't work. Any suggestions?
<p:column headerText="Status" style="text-align: center">
<p:commandButton id='a' rendered="#{bean.isActivated(account_status)==true}" oncomplete="PF('deactivateDialog').show();" value="Activated">
<f:setPropertyActionListener value="#{searchEmployeeResultList}" target="#{bean.selectedEmployee}"/>
</p:commandButton>
<p:confirmDialog id="confirmDeactivateDialog" header="Confirm Deactivation" widgetVar="deactivateDialog">
<p:commandButton id="Deactivate" value="Ok" oncomplete="PF('deactivateDialog').hide();" actionListener="#{AccountManagedBean.deactivate}"/>
</p:confirmDialog>
<p:commandButton id="b" rendered="#{bean.isActivated(account_status)==false}" oncomplete="PF('activateDialog').show();" value="Deactivate">
<f:setPropertyActionListener value="#{searchEmployeeResultList}" target="#{bean.selectedEmployee}"/>
</p:commandButton>
<p:confirmDialog id="confirmActivateDialog" header="Confirm Activation" widgetVar="activateDialog">
<p:commandButton id="Activate" value="Ok" oncomplete="PF('activateDialog').hide();" actionListener="#{AccountManagedBean.activate}"/>
</p:confirmDialog>
</p:column>
try
update="a b"
with no comma between them
I'm trying to show an updated value in confirm dialog message but I keep getting the old value as in this scenario
<h:form>
<p:inputText value="#{bean.object.amount}"/>
<p:commandButton value="CALCULATE" update="cal" actionListener="#{bean.calculate()}"/>
<h:panelGroup id="cal">
<h:outputText value="#{bean.object.amount}"/>
<p:commandButton value="SUBMIT" actionListener="#{bean.submit()}">
<p:confirm header="Confirmation" message="Amount is : #{bean.object.amount} ?"/>
</p:commandButton>
<p:confirmDialog global="true">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</h:panelgGroup/>
</h:form>
Bean code:
#ManagedBean(name="bean")
#ViewScoped
public class Bean implements Serializable {
private SomeClass object;
#PostConstruct
public void init(){
this.object = new SomeClass();
}
public void calculate(){
//do some colculation (not related to amount field in object)
}
public void submit(){
//submit to database
}
//getter setter
}
When I enter a value in amount, lets say 50. and update the cal component I get the updated amount in the outputtext "50". However, in the confirm button message I get amount as 0 instead 50. How can I show the updated value in the confirm message?
PS:
Primefaces-4.0
Take a look at the user guide of primefaces in the confirm dialog section, in the Non-Global mode the document mentioned:
Message facet is
useful if you need to place custom content instead of simple text.
While in the Global mode, I can't find similar sentences like that, and I've tried using the facet in Global mode and it doesn't work.So,
Do you really use this confirm dialog multiple times?
If not:
I suggest you take away the global parameter and change your code like this:
<h:form>
<p:inputText value="#{bean.object.amount}"/>
<p:commandButton value="CALCULATE" update="cal" actionListener="#{bean.calculate()}"/>
<h:panelGroup id="cal">
<h:outputText value="#{bean.object.amount}"/>
<p:commandButton value="SUBMIT" actionListener="#{bean.submit()}" oncomplete="PF('confirmDlg').show()"/>
<p:confirmDialog header="Confirmation" widgetVar="confirmDlg">
<f:facet name="message">
<h:outputText value='Amount is : #{bean.object.amount} ?'/>
</f:facet>
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</h:panelGroup>
</h:form>
.
If so:
(You do use the confirm dialog multiple times and tired of writing several dialogs with same form but different message.)
I suggest you write a dialog on your own,and you can also change the message in the dialog from backing bean like what you did:
<h:form id="myForm">
<p:inputText value="#{bean.object.amount}"/>
<p:commandButton value="CALCULATE" update="cal" actionListener="#{bean.calculate()}"/>
<h:panelGroup id="cal">
<h:outputText value="#{bean.object.amount}"/>
<ui:param name="message" value="Amount is :#{bean.object.amount}?" />
<p:commandButton value="SUBMIT" actionListener="#{bean.setMessage(message)}" action="#{bean.submit()}" update="myForm:myDialog" oncomplete="PF('myDlg').show()"/>
</h:panelGroup>
<p:dialog id='myDialog' widgetVar="myDlg" header="Confirmation" modal="true" resizable="false">
<h:panelGrid columns="3">
<h:panelGroup styleClass="ui-icon ui-icon-alert" style="float:right"/>
<h:outputText value="#{bean.message}"/>
<h:outputText/>
<h:outputText/>
<p:commandButton value="Yes" type="button" icon="ui-icon-check" oncomplete="PF('myDlg').hide()"/>
<p:commandButton value="No" type="button" icon="ui-icon-close" onclick="PF('myDlg').hide()"/>
</h:panelGrid>
</p:dialog>
</h:form>
p:confirm does not implement state saving, thus it loses its attributes' values after the first JSF lifecycle. It also evaluates EL only once at view build time.
I posted the solution in this answer.
I have a primefaces p:orderList which is displayed in a popup on click of a button. When I change the order of Items in the orderlist, and click on Save Order button on the popup, I'm not seeing the list with the changed order. PFB my code -
<p:commandButton ajax="true" id="toolOrderButton" value="Tool Order" onclick="toolOrderPopup.show()" type="button"/>
<p:dialog header="Tool Order" severity="alert" widgetVar="toolOrderPopup"
appendToBody="true">
<p:orderList id="toolOrderList" controlsLocation="right" value="#{toolBean.toolOrderList}" var="tool" itemLabel="#{tool}" itemValue="#{tool}" iconOnly="true"/>
<p:commandButton ajax="true" value="Save Order" process="#this" type="submit" actionListener="#{toolBean.setToolOrder}" oncomplete="toolOrderPopup.hide()"/>
<p:commandButton value="Cancel" onclick="toolOrderPopup.hide()" type="button"/>
</p:dialog>
In the bean:
public void setToolOrder(){
System.out.println("toolOrderList-" + BeanStringConverter.convertToString(toolOrderList));
}
Please let me know what could be wrong with the code.
You need to process the p:orderlist to get the orderList model saved:
<p:commandButton ajax="true" value="Save Order"
process="#this toolOrderList"
actionListener="#{toolBean.setToolOrder}"
oncomplete="toolOrderPopup.hide()"/>
Unrelated to your question you probably have something like:
<h:form>
...
<p:commandButton ajax="true" id="toolOrderButton" value="Tool Order" onclick="toolOrderPopup.show()" type="button"/>
...
<p:dialog header="Tool Order" severity="alert" widgetVar="toolOrderPopup"
appendToBody="true">
<p:orderList id="toolOrderList" controlsLocation="right" value="#{toolBean.toolOrderList}" var="tool" itemLabel="#{tool}" itemValue="#{tool}" iconOnly="true"/>
<p:commandButton ajax="true" value="Save Order"
process="#this"
actionListener="#{toolBean.setToolOrder}"
oncomplete="toolOrderPopup.hide()"/>
<p:commandButton value="Cancel"
onclick="toolOrderPopup.hide()" type="button"/>
</p:dialog>
</h:form>
if so, then see what primefaces doc says about appentToBody:
Use appendToBody with care as the page definition and html dom would be different, for
example if dialog is inside an h:form component and appendToBody is enabled, on the browser
dialog would be outside of form and may cause unexpected results. In this case, nest a form inside
a dialog.
An alternative structure could be the following:
<h:form id="first">
...
<p:commandButton ajax="true" id="toolOrderButton" value="Tool Order" onclick="toolOrderPopup.show()" type="button"/>
...
</h:form>
<p:dialog header="Tool Order" severity="alert" widgetVar="toolOrderPopup"
appendToBody="true">
<h:form id="second">
<p:orderList id="toolOrderList" controlsLocation="right" value="#{toolBean.toolOrderList}" var="tool" itemLabel="#{tool}" itemValue="#{tool}" iconOnly="true"/>
<p:commandButton ajax="true" value="Save Order"
process="#this toolOrderList"
actionListener="#{toolBean.setToolOrder}" oncomplete="toolOrderPopup.hide()"/>
<p:commandButton value="Cancel" onclick="toolOrderPopup.hide()" type="button"/>
</h:form>
</p:dialog>
</h:form>
I have read similar questions on SA and the Primefaces forum but it did not help. Here is the xhtml:
<h:form id="form2" prependId="false">
<p:remoteCommand name="sendNameClicked" actionListener="#{reportBean.passName}"/>
<p:remoteCommand name="updateDialog" update=":form3:dialogBox"/>
<p:commandButton style="display: none" id="displayDialog" type="button" onclick="cd.show(); return false;"/>
</h:form>
<h:form id="form3">
<p:confirmDialog id ="dialogBox" message= "#{reportBean.getClickedAuthorLaius()}"
header="#{reportBean.nameClicked}#{reportBean.authorClicked.mostRecentAffiliation}"
widgetVar="cd"
severity="info"
>
<h:outputText styleClass="ui-widget" value="" escape="false" />
<p:commandButton value="Draw the ring of #{reportBean.obtainFullName()}?" actionListener ="#{controllerBean.prepareNewSearch()}" action ="index?faces-redirect=true" oncomplete="cd.hide();"/>
<p:commandButton value="No, stay on this page" onclick="cd.hide();" type="button" />
</p:confirmDialog>
</h:form>
Any help very much appreciated!
The onclick is fired before the form submit request is sent. The update is performed after form submit response is arrived. So, the confirm dialog is updated after it's been opened and thus get its default appearance again.
You need to open it after the update. Use the oncomplete attribute instead of onclick.
<p:commandButton ... oncomplete="cd.show()"/>