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()"/>
Related
I would like to call the action after click the commandLink and that choose ok to confirm and fire the action in the commandlink. But I could only open a modalPanel and close it. But the action is not invoked in the a4j:commandLink. May I ask how could I fire the action after choose "OK" of the modalPanel?
<a4j:commandLink
action="#{confManager.deleteValue(deleteValue)}"
onclick="#{rich:component('confirmation')}.show();return false"
value="#{messages.deleteLabel}"
title="#{messages.deleteHint}"
propagation="none"
reRender="systemPropertiesTable">
</a4j:commandLink>
<rich:modalPanel id="confirmation" width="210" height="100">
<f:facet name="header">#{messages.systemPropertyConfirmDialogHeader}
</f:facet>
<h:panelGrid>
<h:panelGrid columns="2">
<p><h:outputText value="#{messages.systemPropertyConfirmDialogContent}" /></p>
</h:panelGrid>
<h:panelGroup>
<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" />
</h:panelGroup>
</h:panelGrid>
</rich:modalPanel>
Did you try to transform the OK button into a a4j:commandButton and move the action on the OK button ?
You could save the "deleteValue" in your bean with an actionListener and effectively delete it if the user clicks "OK".
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.
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 am trying to put a p:commandButton inside a overlayPanel, to submit the information of a h:form and redirect to another view. So, I use the property action of the button to perform this operation. I have a managed bean associated with this view but the function used for this purpose is never reached. Can u help me?
Here is the code:
advancedSearch-form.xhtml
<h:form>
<h:panelGrid width="100%">
<h:column>
....
</h:column>
....
<p:commandButton value="Submit" action="#{searchForm.save}">
</p:commandButton>
</h:panelGrid>
In another xhtml:
<h:form>
<div>
...
<div class="menu-search">
<p:commandButton id="advancedSearch" icon="ui-icon-carat-1-s" styleClass="ui-search-button" type="button"/>
<p:overlayPanel id="advancedSearchPanel" styleClass="ui-advanced-search-overlay" for="advancedSearch" hideEffect="fade" my="right top" dynamic="true" dismissable="false">
<ui:include src="/search/advancedSearch-form.xhtml"/>
</p:overlayPanel>
</div>
...
</div>
After looking over the properties of overlay, I solved this question by removing the dynamic property of overlaypanel.