I have a dialog, when user press the button 'Accept' I want to show a ProgressBar in the same dialog, but this its update when actionListener finish.
<p:dialog id="dlgGenerarLista" modal="true" height="180" width="500" header="Generar Lista de Trabajo" widgetVar="dlgGenerarLista">
<p:commandButton onclick="PF('dlgGenerarLista').hide();" value="Cancel" />
<p:commandButton id="btnAceptarGenerar" value="Accept"
actionListener="#{crearEstrategiaBeans.GenerarListaTrabajo}"
oncomplete="PF('dlgGenerarLista').hide();"update="basic"/>
<p:panel id="basic" widgetVar="basic">
<p:progressBar rendered="#{crearEstrategiaBeans.visibilidadBarraProgreso}" id="progressBarIndeterminate" mode="indeterminate"/>
</p:panel>
</p:dialog>
In the method GenerarListaTrabajo() I say that visibilidadBarraProgreso = "true" , so I want that in that moment it shows the progressBar. The progresBar it show when all the process finish.
Here is working solution for your problem:
<h:form id="form">
<p:commandButton onstart="PF('progressBar').jq.show();" oncomplete="PF('progressBar').jq.hide();" />
<p:progressBar widgetVar="progressBar" style="display: none;" />
</h:form>
Short explanation: With PF('progressBar') you'll get the PrimeFaces JavaScript object for your progressbar. With jq you'll get the jQuery element for the progressbar. Then you can use jQuery methods show and hide.
Related
First - I'm new to PrimeFaces and I'm trying to display a warning dialog on top of another already spawned dialog box.
View code looks like (simplified):
<p:dialog id="userDialog" header="User Account" widgetVar="userDialogView" modal="true" resizable="true" closable="fasle" showHeader="true" height="400" width="880px">
<h:form id="dataDialogForm">
...
</h:form>
</p:dialog>
<p:dialog id="warnDialog" header="Warning!" widgetVar="warnDialog" modal="true" appendTo="#(body)" height="300px" width="600px" resizable="false">
<h:outputText value="You are trying to delete. Do you want to proceed? Yes/No" />
</p:dialog>
and controller for warnDialog to spawn it
RequestContext.getCurrentInstance().execute("showDialog('warnDialog')");
warnDialog is getting spawned correctly but displayed under userDialog dialog instead on top of it.
App is using PrimeFaces v6.0
org.primefaces.webapp.PostConstructApplicationEventListener.processEvent Running on PrimeFaces 6.0
Edit:
Tested confirmDialog code (simplified) was like:
<p:dialog id="userDialog" header="User Account" widgetVar="userDialogView" modal="true" resizable="true" closable="fasle" showHeader="true" height="400" width="880px">
<h:form id="dataDialogForm">
...
<p:confirmDialog widgetVar="warnDialog" header="Confirmation" severity="warn" modal="true" resizable="false" position="top,left">
<f:facet name="message">
You are trying to delete. Do you want to proceed?
</f:facet>
<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>
</p:dialog>
That one wasn't producing blocking overlay over userDialog neither wasn't positioning to the top left of the viewport rather than to the element which triggered confirmDialog.
I have solved my problem by overriding PrimeFaces CSS, which for some reason wasn't handling properly overlaying dialog boxes (compared to vanilla jQuery UI or Bootstrap) in versions 5.x and 6.x.
My solution looks like:
<p:dialog id="userDialog" header="User Account" widgetVar="userDialogView" modal="true" resizable="true" closable="fasle" showHeader="true" height="400" width="880px">
<h:form id="dataDialogForm">
...
</h:form>
</p:dialog>
<p:dialog id="warnDialog" header="Warning!" widgetVar="warnDialog" modal="true" height="300px" width="600px" resizable="false" styleClass="dialogWarn-fix">
<h:outputText value="You are trying to delete. Do you want to proceed? Yes/No" />
</p:dialog>
and CSS for it:
.dialogWarn-fix {
z-index: 9999 !important;
}
So i have designed a simple form having selectOneListbox / selectManyMenu elements which I am using to generate a piece of text based upon the user selections.
It's working fine. Now what I want is when the user clicks 'clear' button, the selections should be undone and the page should come back to the initial state(no selections).
How can I achieve this ?
xhtml
<h:form>
<h:panelGrid columns="6" style="margin-bottom:10px;" cellpadding="5" columnClasses="label, value">
<p:panel>
<h6 style="width:10.4em;background-color:#ACBECE;">Comment Type</h6>
<!-- comment type -->
<p:selectOneListbox id="basic1" value="#{decisionTreeBean.option1}" style=" font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
<f:selectItems value="#{decisionTreeBean.commentType}" var="X" itemLabel="#{X}" itemValue="#{X}" />
</p:selectOneListbox>
</p:panel>
<p:panel>
<h6 style="width:10.4em;background-color:#ACBECE;">MTCN</h6>
<p:selectManyMenu id="advanced1" value="#{decisionTreeBean.option2}" showCheckbox="true" style="font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
<f:selectItems value="#{decisionTreeBean.mtcns}" var="X" itemLabel="#{X}" itemValue="#{X}" />
</p:selectManyMenu>
</p:panel>
</h:panelGrid>
<!-- Text Area -->
<p:inputTextarea id="decisionNotes" readonly="#{facesContext.renderResponse}" value="#{decisionTreeBean.decisionNotes}" styleClass="dispostionInputTextArea" autoResize="true">
</p:inputTextarea>
<br/>
<p:commandButton id="generateBtn" value="Generate Text" action="#{decisionTreeBean.generateText}" update=":#{p:component('decisionNotes')}">
</p:commandButton>
<p:commandButton id="clearBtn" value="Clear" action="#{decisionTreeBean.clearText}" update=":#{p:component('decisionNotes')}">
</p:commandButton>
<p:ajaxStatus onstart="PF('statusDialog').show()"
onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" modal="true" draggable="false"
closable="false" resizable="false" showHeader="false">
<p:graphicImage value="/images/ajax-loader.gif" />
</p:dialog>
</h:form>
In my bean, I have a clear method which clears the content of the textarea. I want this button to undo the selections as well as part of the ajax call.
public void clearText() {
this.decisionNotes=" ";
}
(for brevity I have included just 2 columns here in xhtml. There are in total 5 separate selection columns with same functionality)
I would simply reset the values of the Menu/Box in the bean method too:
public void clearText() {
this.decisionNotes=" ";
this.option1 = null;
//and so on...
}
Then you just need to update the components in the update attribute of your button. But I'd update the whole form instead of each component if you want to refresh nearly each component in the form. So just use update="#form":
Note: The default process value of p:commandButton is #form. So your clear button will process the whole form on every click altough it doesn't need to. I'd set it to process="#this", so it will just perform it's action.
Actually had h:selectBooleanCheckbox with ajaxSupport event inside one <h:form id="form1">, so while checking, invoking action/listener but once open modal panel and it contains h:selectBooleanCheckbox as well (which is inside another <h:form id="form2">), just close modal panel and try to check checkbox which is inside form1, but ajaxSupport and action is not invoking, please provide suggestion to fix.
The code is as follows:
<body>
<h:form id="form1">
<h:selectBooleanCheckbox id="customerActiveId"
value="#{manager.customerActive}">
<a4j:support`enter code here`
action="#{bean[action]}"
event="onclick"
reRender="#{reRender}" />
</h:selectBooleanCheckbox>
<br />
<a4j:commandButton id="pnlConfigurationId"
value="project configuration"
oncomplete="$j('#pnlConfigurationMP').toggle();" />
</h:form>
<rich:modalPanel id="pnlConfigurationMP" >
<h:form id="form2" enctype="multipart/form-data">
<h:selectBooleanCheckbox id="projectConfigurableId"
value="#{manager.projectConfigurable}">
<a4j:support
action="#{bean[action]}"
event="onclick"
reRender="#{reRender}" />
</h:selectBooleanCheckbox>
<a4j:commandButton id="cancel" value="cancel" immediate="true" ajaxSingle="true"/>
<a4j:commandButton id="save" value="save" action="#{manager.savePanel()}"/>
</h:form>
</rich:modalPanel>
</body>
Actually ajax event and action is invoking on 'customerActiveId' check at firts time, but once open modal panel and simply close/cancel modal panel and try to check 'customerActiveId' again so ajax event and action is not invoking here
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" />
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()"/>