Primefaces Confirm Message Updated Value - jsf

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.

Related

Create edit form for Primefaces table

I want to create edit form for Primefaces table. I tested this code:
<h:form id="form">
<p:dataTable id="tbl" var="systemuser" value="#{systemusers.systemUsers}"
selectionMode="single" selection="#{systemusers.selectedSystemUser}" rowKey="#{systemuser.username}" lazy="true"
resizableColumns="true"
>
<p:ajax event="rowSelect" listener="#{systemusers.onRowSelect}" update=":form:carDetail" oncomplete="PF('carDialog').show()" />
....................
</p:dataTable>
<p:dialog id="wd" header="System User Details" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="true">
<p:outputPanel id="carDetail" style="text-align:center;">
<p:panelGrid columns="2" columnClasses="label,value">
<h:outputLabel for="id" value="ID" />
<p:outputLabel id="id" value="#{systemusers.selectedSystemUser.id}" rendered="#{not systemusers.editable}"/>
<h:inputText value="#{systemusers.selectedSystemUser.id}" rendered="#{systemusers.editable}" />
........
</p:panelGrid>
</p:outputPanel>
<f:facet name="footer">
<p:commandButton value="Edit System User" rendered="#{not systemusers.editable}"
actionListener="#{systemusers.editRecord(false)}">
<f:ajax render=":form:wd" execute=":form:wd"></f:ajax>
</p:commandButton>
<p:commandButton value="Cancel" rendered="#{systemusers.editable}" actionListener="#{systemusers.editRecord(true)}">
<f:ajax render=":form" execute=":form"></f:ajax>
</p:commandButton>
</f:facet>
</p:dialog>
<p:contextMenu for="tbl">
<p:menuitem value="View" update="carDetail" icon="fa fa-search" oncomplete="PF('carDialog').show()"/>
<p:menuitem value="Delete" update="tbl" icon="fa fa-remove" actionListener="#{systemusers.deleteSystemUser}">
<p:confirm header="Confirmation" message="Are you sure?" icon="fa fa-warning" />
</p:menuitem>
</p:contextMenu>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="fa fa-check" />
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="fa fa-remove" />
</p:confirmDialog>
</h:form>
Managed bean:
#Named
#RequestScoped
public class Systemusers implements Serializable
{
.......
public void editRecord(boolean editable)
{
SessionFactory factory = HibernateUtils.getSessionFactory();
Session session = factory.getCurrentSession();
try
{
session.getTransaction().begin();
SystemUsersModel obj = new SystemUsersModel();
obj.setId(selectedSystemUser.getId());
..........
session.update(obj);
session.getTransaction().commit();
this.editable = editable;
}
catch (Exception e)
{
e.printStackTrace();
session.getTransaction().rollback();
}
}
......
private boolean editable = false;
public boolean isEditable()
{
return editable;
}
public void setEditable(boolean editable)
{
this.editable = editable;
}
}
When I open the Edit form and I click button Edit System User the form disappears. Probably because I render and execute it. How I can execute the form and under it without closing it?
The example code is bad in multiple ways. Two things stand out:
It is not an [mcve]
<f:ajax render=":form" execute=":form"> is superfluous or might even cause the weird behaviour
OP most likely does not know that (quote from the PrimeFaces showcase , emphasis mine)
CommandButton
CommandButton extends the standard h:commandButton with ajax, partial processing and skinning features.
So the commandBotton is already ajax anabled and does not need to hava a
<f:ajax render=":form" execute=":form">
inside it. This (most likely) makes an the update run twice. One #none (Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes) and one updating the form. The second one most likely does not have any content. But trying (and debugging) will make things clear. If this is not the answer, the reason cannot be seen in the code and hence it should have been a [mcve]

InputTextarea in Dialog shouldn't process but it does

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" />

PrimeFaces commandButton to set edit mode and refresh the form

I am trying to have a button that sets edit mode and refreshes the form, but by clicking the button, nothing happens.
This is my code:
<h:form>
<h:panelGrid columns="2" cellpadding="5">
<p:commandButton type="submit" value="Edit Your Records" icon="ui-icon-edit"
update="#form" rendered="#{!bean.editMode}">
<f:setPropertyActionListener value="true" target="#{bean.editMode}"/>
</p:commandButton>
<p:commandButton type="submit" value="Exit Edit Mode" icon="ui-icon-back"
update="#form" rendered="#{bean.editMode}">
<f:setPropertyActionListener value="false" target="#{bean.editMode}"/>
</p:commandButton>
</h:panelGrid>
<p:dataTable id="table" value="#{bean.table}" var="apartment">
...
</p:dataTable>
</h:form>
Thanks!
I would suggest using
<h:form>
<p:commandButton value="Edit Your Records" update="#form" rendered="#{!bean.editMode}" action="#{bean.toggleEditMode()}" />
<p:commandButton value="Exit Edit Mode" update="#form" rendered="#{bean.editMode}" action="#{bean.toggleEditMode()}" />
<h:outputText value="#{bean.editMode}" />
and
public void toggleEditMode() {
this.editMode = !this.editMode;
}
ok, it seams that the function called in the 'action' attribute needs to return a String.
The following worked:
public String toggleEditMode() {
this.editMode = !this.editMode;
return "#";
}
Thanks!

Display a formatted text / message on p:confirmDialog

When a row in <p:dataTable> is right-clicked, <p:contextMenu> appears with a delete option. When this option is clicked, <p:confirmDialog> appears with two buttons Yes and No - a conformation warning about deleting the current row as follows.
<p:contextMenu for="dataTable">
<p:menuitem oncomplete="confirmDelete.show()"
value="Delete"
update="confirmDialog"
process="#this dataTable"
actionListener="#{testManagedBean.deleteActionListener}"
icon="ui-icon-close" ajax="true"/>
</p:contextMenu>
<p:confirmDialog id="confirmDialog"
widgetVar="confirmDelete"
message="#{testManagedBean.message}"
header="Message"
severity="alert"
closeOnEscape="true"
showEffect="slide"
hideEffect="fold"
appendTo="#(body)"
closable="true">
<p:commandButton id="btnYes"
value="Yes"
process="#this"
oncomplete="confirmDelete.hide()"
actionListener="#{testManagedBean.deleteActionListener}"
update="dataTable"/>
<p:commandButton id="btnNo"
value="No"
onclick="confirmDelete.hide()"
type="button" />
</p:confirmDialog>
Is there a way to set the message attribute with a formatted message on this dialog.
For example, the property testManagedBean.message in its managed bean is set to a string like
You are about to delete <font color='#ff0000'>2</font> rows. <br/>This action will never be undone. <br/>Are you sure?
The confirm dialog displays this string as a whole. HTML in this string should be interpreted as HTML. I don't see any attribute like escape in <p:confirmDialog>.
Is there a way to display this string as a formatted message.
I found an ugly solution nesting of <f:facet name="message"> within <p:confirmDialog>.
<p:confirmDialog id="confirmDialog"
widgetVar="confirmDelete"
header="Message"
severity="alert"
closeOnEscape="true"
showEffect="slide"
hideEffect="fold"
appendTo="#(body)"
closable="true">
<p:commandButton id="btnYes"
value="Yes"
process="#this"
oncomplete="confirmDelete.hide()"
actionListener="#{testManagedBean.deleteActionListener}"
update="dataTable"/>
<p:commandButton id="btnNo"
value="No"
onclick="confirmDelete.hide()"
type="button" />
<f:facet name="message">
<h:outputFormat value="#{testManagedBean.message}" escape="false"/>
</f:facet>
</p:confirmDialog>
Removing the message attribute from <p:comfirmDialog> and nesting <f:facet name="message"> inside it.
Note : <h:outputFormat> is only needed, if one or more parameters need to be passed by means of nested <f:param> to be substituted in respective placeholders ({0}) in the message text. Just keep on using <h:outputText escape="false">, if no such parameters need to be passed.

primefaces orderlist not getting updated with the changed order

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>

Resources