I try to add recaptcha in the Roo-generated xhtml:
<p:dialog id="createDialog" header="#{messages.label_create} Person" modal="true" widgetVar="createDialogWidget" dynamic="true" visible="#{personBean.createDialogVisible}" resizable="true" maximizable="true" showEffect="fade" hideEffect="explode">
<p:ajax event="close" update=":dataForm:data" listener="#{personBean.handleDialogClose}" />
<p:outputPanel id="createPanel">
<h:form id="createForm" enctype="multipart/form-data">
<h:panelGrid id="createPanelGrid" columns="3" binding="#{personBean.createPanelGrid}" styleClass="dialog" columnClasses="col1,col2,col3" />
<p:captcha id="createReCaptcha" theme="white"/>
<p:commandButton id="createSaveButton" value="#{messages.label_save}" action="#{personBean.persist}" update="createPanelGrid :growlForm:growl" />
<p:commandButton id="createCloseButton" value="#{messages.label_close}" onclick="createDialogWidget.hide()" type="button" />
</h:form>
</p:outputPanel>
</p:dialog>
And no recaptha is shown.... Where I am wrong?
Remove the dynamic="true" from your p:dialog
Related
http://icefaces-showcase.icesoft.org/showcase.jsf?grp=ace:dialog&exp=Server%20Initiated I am just trying to learn how to use this component. But unable to run this example. When I click the button nothing happens. Does anybody have any idea? There is no error message either.
<h:form>
<h:panelGroup style="display:block; text-align:center;">
<ace:pushButton id="show" value="Show Dialog"
type="button">
<ace:ajax execute="#none" render="#none"
onStart="ice.ace.instance('#{dialog.clientId}').show(); return false;"/>
</ace:pushButton>
</h:panelGroup>
</h:form>
<ace:dialog id="dialog" binding="#{dialog}"
header="A sample dialog overview example"
closable="false"
modal="true"
draggable="false"
showEffect="clip"
hideEffect="fade"
width="400">
<h:form id="inputForm">
<h:panelGrid columns="2" width="100%">
<h:outputLabel id="firstNameLabel" for="firstNameInputField" value="First Name:"/>
<ace:textEntry id="firstNameInputField"
value="#{dialogBean.firstName}" />
<h:outputLabel id="lastNameLabel" for="lastNameInputField" value="Last Name:"/>
<ace:textEntry id="lastNameInputField"
value="#{dialogBean.lastName}"/>
</h:panelGrid>
<h:panelGrid width="100%" style="text-align: center;">
<ace:pushButton id="submitBtn"
value="Click me once done with input">
<ace:ajax execute="#form" render="#all"
onSuccess="ice.ace.instance('#{dialog.clientId}').hide(); "/>
</ace:pushButton>
</h:panelGrid>
</h:form>
</ace:dialog>
<h:form id="outputForm">
<h:panelGrid id="outputPanel" columns="2">
<h:outputLabel value="Entered text: " for="enteredName"/>
<h:outputText id="enteredName" value="#{dialogBean.firstName} #{dialogBean.lastName}"/>
</h:panelGrid>
</h:form>
This is the client side code from the example.
<h:form prependId="false">
<h:commandButton id="show" value="Show Dialog" onclick="ice.ace.instance('myDialog').show();" type="button"/>
<ace:dialog id="myDialog"
header="A sample dialog overview example"
width="400">
<h:outputText value="i will fix this"/>
</ace:dialog>
</h:form>
I was able to find the solution to the problem. One of the key problem was that I was suppose to use prependId="false" with form. so now the basic functionality works and on button click the ace:dialog appears.
i need help with this. I have a 'form' which call a p:dialog through p:commandButton. That p:dialog include other p:commandButton, but that second button does not take any action, which is weird for me, because the first button works fine.
The code:
<ui:define name="body">
<br/>
<br/>
<br/>
<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="/resources/Images/ajax-loader.gif" alt="Por favor espere..." />
</p:dialog>
<h:form id="BuscarEmpresaForm">
<h:panelGroup id="display">
<h:panelGrid columns="2" style="margin-left: 10px;">
<p:outputLabel value="#{bundle.BuscarEmpresaBuscarLabel}" />
<h:outputLabel/>
<h:selectOneRadio id="idBusquedaRadio" value="#{cupoController.radioButtonBusqueda}">
<f:selectItem itemLabel="#{bundle.BuscarEmpresaCodigoLabel}" itemValue="Codigo" />
<f:selectItem itemLabel="#{bundle.BuscarEmpresaNombreLabel}" itemValue="Nombre" />
</h:selectOneRadio>
<h:outputLabel/>
<p:inputText id="empresa" value="#{cupoController.empresaTextoBusqueda}" required="true" requiredMessage="El campo es requerido"/>
<!--THIS BUTTON WORKS-->
<p:commandButton value="Buscar" actionListener="#{cupoController.prepareCreateEmpresa()}" action="#{cupoController.searchEmpresa()}" oncomplete="PF('dlg1').show();" update=":confirmDialogEmpresa">
</p:commandButton>
<p:message for="empresa"/>
</h:panelGrid>
</h:panelGroup>
</h:form>
<p:dialog id="dialog1" header="Mensaje" widgetVar="dlg1" minHeight="40" modal="true" appendTo="#(body)">
<h:form id="confirmDialogEmpresa">
<h:panelGroup id="display">
<h:panelGrid columns="2" rendered="#{cupoController.selectedEmpresa.codcor != null}">
<p:outputLabel value="Empresa encontrada, Continuar?"/>
<h:outputLabel/>
<p:outputLabel value="Nombre: #{cupoController.selectedEmpresa.razonsocial}"/>
<h:outputLabel/>
<p:outputLabel value="RUC: #{cupoController.selectedEmpresa.ruc}"/>
<h:outputLabel/>
<!--THIS BUTTON DOES NOT WORK-->
<p:commandButton value="Si" action="#{cupoController.buscarCupo}" icon="ui-icon-check"/>
<p:commandButton value="No" onclick="dlg1.hide();" icon="ui-icon-close" update="#none"/>
</h:panelGrid>
<h:panelGrid columns="2" rendered="#{cupoController.selectedEmpresa.codcor == null}" >
<p:outputLabel value="Empresa no encontrada"/>
<h:outputLabel/>
<p:messages />
<h:outputLabel/>
<p:commandButton value="Aceptar" onclick="dlg1.hide();" icon="ui-icon-close" update="#none"/>
</h:panelGrid>
</h:panelGroup>
</h:form>
</p:dialog>
</ui:define>
I have done some attempts replacing p:commandButton for h:commandButton but have same results.
An image showing what code outs
Thanks in advance.
I found the problem and is related to the topic: Backing beans (#ManagedBean) or CDI Beans (#Named)?
In my case i was confused. I was mixing CDI annotations with JSF annotations in the managed bean related, producing a strange behavior. Finally i have fixed letting just JSF annotations.
Core: JSF 2.0, PrimeFaces 5.0, GlassFish 4.1
I have a PrimeFaces dialog, that has two command buttons that executes some code in the backing bean. I want to block the dialog within the action.
I managed to do it using blockUI, but when the blockUI is present, and I open the dialog, it appears at the bottom of the page.
If I remove the blockUI component, the dialog opens at the center of the page, as I want. But I want it to be centered and with the blockUI.
<p:dialog header="Attention" id="dialog" position="center"
widgetVar="dialog" modal="true" closable="false"
dynamic="true" closeOnEscape="false">
<div class="internal-margin-top">
<h:outputText value="Location" styleClass="ui-outputtext" />
<p:inputText value="#{activityBean.location}"
id="inputLocation" maxlength="15">
</p:inputText>
</div>
<div class="internal-margin-bottom">
<p:commandButton id="closureYes" value="Yes"
styleClass="btn-green"
onstart="PF('block').show();"
oncomplete="PF('dialog').hide(); PF('block').hide();"
action="#{activityBean.processItem()}" process="#all">
</p:commandButton>
<p:commandButton id="closureNo" value="No"
styleClass="btn-red"
onstart="PF('block').show();"
oncomplete="PF('dialog').hide(); PF('block').hide();"
action="#{activityBean.processActivity()}" process="#all" />
</div>
</p:dialog>
<p:blockUI block="scrapDialog" widgetVar="block">
<p:graphicImage library="images" name="loading_bar.gif" />
</p:blockUI>
Thanks in advance.
Example with a centered modal dialog:
<p:dialog header="Header" position="center" widgetVar="wv_dialog" modal="true" closable="false" dynamic="true" closeOnEscape="false">
<h:form id="dialogform">
<p:panelGrid columns="1">
<p:inputText value="test"/>
<p:inputText value="test"/>
<p:inputText value="test"/>
<p:inputText value="test"/>
</p:panelGrid>
<p:commandButton id="closebutton"
value="Close"
oncomplete="PF('wv_dialog').hide();"
action="#{testBean.actionTest()}"
process="#form"/>
<p:blockUI block="dialogform" trigger="closebutton"/>
</h:form>
</p:dialog>
I need your help in refreshing the Dialog content on commandButton click as it is keeping the old values by default and it is not refreshing. My Code is:
<h:form id="Requests">
<p:dataTable id="PendingRequests" var="hr" value="#{hrd.pendingRequests}">
<p:commandButton id="submitbutton" update=":Requests:#{hr.dialogueName} "
oncomplete="PF('#{hr.certificateDialogue}').show()">
<f:setPropertyActionListener value="#{hr}" target="#{hrd.selectedRequest}"/>
</p:commandButton>
</p:dataTable>
<p:dialog id="cert1" header="cert1" widgetVar="cert1" modal="true" showEffect="fade"
hideEffect="fade" resizable="true">
<p:outputPanel id="SS1" style="text-align:center;" autoUpdate="true">
</p:outputPanel>
</p:dialog>
<p:dialog id="cert2" header="cert2" widgetVar="cert2" modal="true" showEffect="fade"
hideEffect="fade" resizable="true">
<p:outputPanel id="SS2" style="text-align:center;" autoUpdate="true">
</p:outputPanel>
</p:dialog>
</h:form>
I have this fragment:
<h:form id="form">
<!-- other content -->
<p:panel id="panel" header="test">
<p:inputText id="input1" value="#{viewScope.prop1}" required="true" />
<p:commandButton id="button1" process="#form" update="#form #widgetVar(dialog)"
oncomplete="PF('dialog').show()" value="ok" />
</p:panel>
<!-- other content -->
</h:form>
<p:dialog id="dialog" header="dialog" widgetVar="dialog" modal="true">
<h:form id="form2">
<p:inputText id="input2" value="#{viewScope.prop1}" required="true" />
<p:commandButton id="button2" process="#form" update="#form" value="ok" />
</h:form>
</p:dialog>
and all is working as expected.
What I'd like to achieve is this:
<h:form id="form">
<!-- other content -->
<!-- fragment start -->
<!-- this fragment will be on its own file and included via ui:include (or inside composite component) -->
<p:panel id="panel" header="test">
<p:inputText id="input1" value="#{viewScope.prop1}" required="true" />
<p:commandButton id="button1" process="#form" update="#form #widgetVar(dialog)"
oncomplete="PF('dialog').show()" value="ok" />
</p:panel>
<p:dialog id="dialog" header="dialog" widgetVar="dialog" modal="true" appendTo="#(body)">
<h:form id="form2">
<p:inputText id="input2" value="#{viewScope.prop1}" required="true" />
<p:commandButton id="button2" process="#form" update="#form" value="ok" />
</h:form>
</p:dialog>
<!-- fragment end -->
<!-- other content -->
</h:form>
but I unsuccessfully tried some combination of process and update for button1 resulting in process anything... input1 is even resetting...
So, how to build a p:dialog that can be shipped inside a fragment or a composite comp and that is excluded from outside form?
Note that using:
<h:form id="form">
<!-- other content -->
<ui:include src="panel.xhtml" />
<!-- other content -->
</h:form>
<ui:include src="dialog.xhtml" />
is not an acceptable solution.
I'm on JSF 2.2.8 (mojarra) and PF 5.1
Finally, I found a way using OmniFaces, with <o:moveComponent /> :
page:
<h:form id="form">
<!-- other content -->
<ui:include src="/fragment/with/inner/form.xhtml" />
<!-- other content -->
</h:form>
fragment:
<ui:composition>
<p:inputText id="outerText" value="#{viewScope.text}" />
<p:commandButton id="openButton" process="#form" update="#widgetVar(testDialog)"
oncomplete="PF('testDialog').show()" value="open" />
<o:moveComponent id="move" for=":#{facesContext.viewRoot.clientId}" destination="ADD_LAST">
<h:form id="innerForm">
<p:dialog id="dialog" widgetVar="testDialog" header="test dialog">
<p:inputText id="innerText" value="#{viewScope.text}" />
<f:facet name="footer">
<p:commandButton id="confirmButton" process="#form" update=":form"
oncomplete="if(!args.validationFailed) PF('testDialog').hide()"
value="submit" />
</f:facet>
</p:dialog>
</h:form>
</o:moveComponent>
</ui:composition>
This will cause some warning:
WARNING Unable to save dynamic action with clientId 'form:innerForm:dialog' because the UIComponent cannot be found
WARNING Unable to save dynamic action with clientId 'form:innerForm:innerText' because the UIComponent cannot be found
WARNING Unable to save dynamic action with clientId 'form:innerForm:confirmButton' because the UIComponent cannot be found
because the restored components are not re-removed on subsequent RESTORE_VIEW for postback.
These warnings, as for my experiments, are harmless and could be safely ignored.
However I opened a pull request to eventually fix it.
Only use one form inside of dialog. Work fine for me.
<h:body>
<h:form id="OneFormId">
<!-- Some content -->
</h:form>
<p:dialog id="MyDialogId" header="My Header Info"
widgetVar="MyWidgetVarName" modal="true" appendTo="#(body)">
<h:form id="MyFormId">
<p:outputPanel>
<p:messages id="MyMsgId" autoUpdate="true" />
<h:panelGrid columns="2">
<h:outputLabel for="usr" value="User:" />
<p:inputText id="usr" value="#{MyManageBeanName.MyProperty}"
required="true" requiredMessage="User is required." />
</h:panelGrid>
<p:separator />
<h:panelGrid columns="2">
<p:commandButton value="Save" id="MyBtnSaveId"
styleClass="ui-priority-primary" icon="ui-icon-circle-check"
process="#form" />
<p:commandButton value="Cancel" id="MyBtnCancelId"
onclick="PF('MyWidgetVarName').hide()"
styleClass="ui-priority-primary" icon="ui-icon-close"
process="MyBtnCancelId" />
</h:panelGrid>
</p:outputPanel>
</h:form>
</p:dialog>
<h:form id="OtherFormId">
<!-- Some content -->
</h:form>