Display a formatted text / message on p:confirmDialog - jsf

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.

Related

Primefaces modal not updating

Hi I've been stuck for sometime getting a modal form to update, it's loading the data, and it's calling the function - it's just not passing the data back to the server
<h:form id="modal">
<p:dialog widgetVar="modalText" styleClass="modalSceneText" modal="true" dynamic="true" >
<p:panel id="sceneText">
<p:inputTextarea id="sceneName" immediate="true" style="width: 200px" rows="1" counter="labelCount" maxlength="20" counterTemplate="{0} characters remaining." value="#{CustomerDashboardController.selectedScene.title}"/><h:outputText id="labelCount" /><br/>
<p:inputTextarea id="sceneDescription" immediate="true" rows="10" cols="50" value="#{CustomerDashboardController.selectedScene.description}" counter="descriptionCount" maxlength="1000" counterTemplate="{0} characters remaining." autoResize="false" /><br/>
<h:outputText id="descriptionCount" />
</p:panel>
<p:ajax event="close" process="#form" immediate="true" update=":form:locationScenes" listener="#{CustomerDashboardController.saveSelectedScene()}" />
</p:dialog>
</h:form>
I've tried it inside and outside the form, I've tried everything I can think off..
The sceneName & sceneDescription are loading the correct data, they're just not saving any changes when the modal/dialog is closed. saveSelectedScene() is being called fine.
EDIT
I can get it to save with a
<p:commandLink value="save" action="#{CustomerDashboardController.saveSelectedScene()}"/>
Which isn't very pretty. Seems the problem is trying to save on the close event.
Your problem here is that the saveSelectedScene() method which is called from the listener in the ajax component is using the old values of the inputTextarea's.
As a workaround you can use a remoteCommand component and call that on your close event instead:
<h:form id="modal">
<p:remoteCommand name="rc" update=":form:locationScenes" actionListener="#{CustomerDashboardController.saveSelectedScene()}" />
<p:dialog widgetVar="modalText" styleClass="modalSceneText" modal="true" dynamic="true" >
<p:panel id="sceneText">
<p:inputTextarea id="sceneName" immediate="true" style="width: 200px" rows="1" counter="labelCount" maxlength="20" counterTemplate="{0} characters remaining." value="#{CustomerDashboardController.selectedScene.title}"/><h:outputText id="labelCount" /><br/>
<p:inputTextarea id="sceneDescription" immediate="true" rows="10" cols="50" value="#{CustomerDashboardController.selectedScene.description}" counter="descriptionCount" maxlength="1000" counterTemplate="{0} characters remaining." autoResize="false" /><br/>
<h:outputText id="descriptionCount" />
</p:panel>
<p:ajax event="close" process="#form" immediate="true" oncomplete="rc()" />
</p:dialog>
</h:form>
Also consider if the immediate="true" are really necessary in your code
Have you tried removing immediate="true" from both input elements and p:ajax tag? It seems to me that you don't need it - especially not on p:ajax tag.
Hope this helps!

Primefaces confirmDialog with EL variables and in modal Window

I have a strange problem with Primefaces' confirm Dialog.
What I need is a confirmation dialog that displays some variables im my Bean, working in a modal dialog window and firing a Bean method. But it seems I can't get the 3... :-(
Here is what I've been trying:
<p:confirmDialog header="Aviso de Confirmação"
closable="false"
appendToBody="true"
global="false"
showEffect="fade"
hideEffect="fade"
widgetVar="confirmDlg">
<h:form>
<f:facet name="message">
<h:outputText value="Confirma o registro de desistência do candidato(a) #{registrosCandidatoBean.candidatoInclusaoDesistencia.inscricao} - #{registrosCandidatoBean.candidatoInclusaoDesistencia.papelPessoa.pessoaFisica.nomeCompleto}?" />
</f:facet>
<p:commandButton value="Sim"
styleClass="ui-confirmdialog-yes"
icon="ui-icon-check"
action="#{registrosCandidatoBean.gravarDesistencia()}"
update=":formDesistencia :formMensagem:mensagemFixa"
ajax="false"
immediate="true" />
<p:commandButton value="Não"
styleClass="ui-confirmdialog-no"
icon="ui-icon-close"
onclick="confirmDlg.hide();" />
</h:form>
</p:confirmDialog>
*** This one displays the message and calls the method. But the "message" in f:facet is not displayed. Id I use the normal "message" attribute, It doesn't use the variables in my bean.
<p:confirmDialog header="Aviso de Confirmação"
closable="false"
appendToBody="true"
global="false"
showEffect="fade"
hideEffect="fade"
widgetVar="confirmDlg">
<f:facet name="message">
<h:outputText value="Confirma o registro de desistência do candidato(a) #{registrosCandidatoBean.candidatoInclusaoDesistencia.inscricao} - #{registrosCandidatoBean.candidatoInclusaoDesistencia.papelPessoa.pessoaFisica.nomeCompleto}?" />
</f:facet>
<p:commandButton value="Sim"
styleClass="ui-confirmdialog-yes"
icon="ui-icon-check"
action="#{registrosCandidatoBean.gravarDesistencia()}"
update=":formDesistencia :formMensagem:mensagemFixa"
ajax="false"
immediate="true" />
<p:commandButton value="Não"
styleClass="ui-confirmdialog-no"
icon="ui-icon-close"
onclick="confirmDlg.hide();" />
</p:confirmDialog>
*** This one displays the message and "message" in f:facet. But any Bean methods aren't called.
<p:confirmDialog header="Aviso de Confirmação"
closable="false"
global="false"
showEffect="fade"
hideEffect="fade"
widgetVar="confirmDlg">
<f:facet name="message">
<h:outputText value="Confirma o registro de desistência do candidato(a) #{registrosCandidatoBean.candidatoInclusaoDesistencia.inscricao} - #{registrosCandidatoBean.candidatoInclusaoDesistencia.papelPessoa.pessoaFisica.nomeCompleto}?" />
</f:facet>
<p:commandButton value="Sim"
styleClass="ui-confirmdialog-yes"
icon="ui-icon-check"
action="#{registrosCandidatoBean.gravarDesistencia()}"
update=":formDesistencia :formMensagem:mensagemFixa"
ajax="false"
immediate="true" />
<p:commandButton value="Não"
styleClass="ui-confirmdialog-no"
icon="ui-icon-close"
onclick="confirmDlg.hide();" />
</p:confirmDialog>
*** This one displays the message and "message" in f:facet. Apparently it calls the Bean methods, but I can't test it since the dialog is greyed and I can't click the buttons.
Can it work the way I need?
Primefaces 4.0
Thanks! :)
for the third scenario, try adding;
appendTo="#(body)"

Rich DataTable value selection issues

I am trying to delete data table values. my data tables shows lot of values. when i click to delete particular row in my data table then confirmation dialog box open. if click okay then call to bean and delete that values to database. if click cancel then not to call to bean.. this is my functionality..
ex:
my data table show 10 rows. when i select 1 rows delete button clicked call to bean but its get another rows values pass to bean...
my UI code..
<h:commandButton image="/images/remove.png" onclick="# {rich:component('confirmation')}.show();return false"/>
<a4j:jsFunction name="submit" action="#{bean.delete}">
<f:setPropertyActionListener target="#{bean.name}" value="#{info.name}" />
</a4j:jsFunction>
<rich:popupPanel id="confirmation" width="250" height="150">
<f:facet name="header">confirmation</f:facet>
<h:panelGrid>
<h:panelGrid columns="2">
<h:graphicImage value="/images/remove.png" />
<h:outputText value="Are you sure?" style="FONT-SIZE: large;" />
</h:panelGrid>
<br></br>
<h:panelGroup >
<center><input type="button" value="OK"
onclick="#{rich:component('confirmation')}.hide();submit();return false" />
<input type="button" value="Cancel"
onclick="#{rich:component('confirmation')}.hide();return false" /> </center>
</h:panelGroup>
</h:panelGrid>
</rich:popupPanel>
I guess it has something to do with the 'AJAX calls out of sync'
The posted code lacks the table info so ill assume it has something to do with the AJAX handling.
<rich:extendedDataTable
id="myTable"
value="#{myBean.rows}"
selectionMode="single"
rows="#{crudBean.actionForm.occurrences}"
...
rowKeyVar="idx"
...>
<a4j:ajax event="selectionchange"
listener="#{myBean.selectionListener}"/>
<rich:column width="30px" styleClass="#{rowItem.className}">
<util:myInputText id="status" managedBean="#{myBean}" rowItem="#{rowItem}" rowIndex="#{idx}"/>
</rich:column>
<util:myDeleteRecord id="delete" managedBean="#{myBean}" rowItem="#{rowItem}" rowIndex="#{idx}"/>
</rich:column>
</rich:extendedDataTable>
On my components i use: rowIndex="#{idx}" to make sure i know on which row i'm editing/removing

Primefaces Confirm Message Updated Value

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.

Simple pop-up after p:selectBooleanCheckbox?

I have several pages where I am using PrimeFaces checkbox in this way:
<p:column>
<f:facet name="header">
<p:selectBooleanCheckbox value="#{Bean.allChecked}">
<p:ajax process="#this" update=":form:table" listener="#{Bean.handleAllChecked}"/>
</p:selectBooleanCheckbox>
</f:facet>
...
</p:column>
I'd like to bring up an info pop-up dialog saying "This will select all items!" with only one "OK" button. How would I do that?
Have in mind that there are several pages with the same behaviour, and I'd like to avoid copy/pasting the same code over and over again if possible.
This can be achived by using primefaces commandButton and Confirmation dialog
in your xhtml file
<f:facet name="header">
<p:commandButton value="Select All" actionListener="#{testBean.handleAll}">
<p:confirm header="Select All" message="This will select all items?"
icon="ui-icon-alert" />
</p:commandButton>
</f:facet>
Add confirmation dialog code (you can create one file and just include in any xhtml )
<p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
<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>
Managedbean
public void handleAll(ActionEvent event){
System.out.println("called only when selected yes");
}
The method handleAll will only be called if user clicks "Yes" otherwise it won't do anything.
I hope that help

Resources