ace:dialog component sample not working - jsf

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.

Related

Primefaces panels appear open when collapsed is set to true

By default when page is loaded the panel appear close because i have the attribute collapsed="true". I want that when i edit an add automatically the panel updates, the update works fine but all the panels appear open even though i have collapsed set to true. I dont know why this happens. Does any knows why? and how to solve this?
addView.xhtml:
<body>
<h:outputStylesheet name="./../../resources/css/cssLayout.css"/>
<ui:composition template="./../../Layouts/LayoutGeneral.xhtml">
<ui:define name="content">
<h1 style="text-align: center">Adds</h1> <br/>
<h:form id="allAddsId">
<ui:repeat value="#{addBean.allAdds}" var="add" >
<p:panel id="basic" header="#{add.title}" style="margin-bottom:20px" toggleable="true" collapsed="true" styleClass="">
<p:ajax event="toggle"/>
<h:panelGrid columns="2" style="width:100%">
<p:outputLabel value="#{add.description}" />
</h:panelGrid> <br/>
<p:separator/>
<p:commandButton value="Edit" oncomplete="PF('detail').show();" update="detailAdd" action="#{addBean.setAddAux(add)}"/>
<p:growl id="growl" showDetail="true" sticky="false" />
</p:panel>
</ui:repeat>
</h:form>
<p:dialog id="detail" header="Edit Add" widgetVar="detail">
<p:outputPanel id="detailAdd">
<h:form>
<p:outputLabel value="Title"/><br/>
<p:inputTextarea id="titleEdit" value="#{addBean.addAux.title}" rows="2" cols="50" counter="displayTE" maxlength="50" counterTemplate="{0} caracteres restantes" autoResize="false" required="true" requiredMessage="Title necesaria"/> <br/>
<p:outputLabel id="displayTE"/> <br/> <br/>
<p:outputLabel value="Description"/> <br/>
<p:inputTextarea id="opcion1" value="#{addBean.addAux.description}" rows="6" cols="50" counter="displayDE" maxlength="200" counterTemplate="{0} caracteres restantes" autoResize="false" required="true" requiredMessage="Description necesaria"/> <br/>
<p:outputLabel id="displayDE"/> <br/> <br/>
<p:separator/> <br/>
<h:panelGrid columns="1">
<p:commandButton value="Save" action="#{addBean.editAdd(addBean.addAux)}" onclick="detail.hide()" update=":allAddsId"/>
</h:panelGrid>
</h:form>
</p:outputPanel>
</p:dialog>
</ui:define>
</ui:composition>
</body>
Okey i found a solution!! i dont know if this is the best answers but here i go..
I was doing somo test and i delete p:ajax event="toggle" which is under the panel declaration and now works!! When i edit an add the list of adds automatically updates and the panels appear collapsed!! I dont why deleting that makes it works so if someone knows feel free to tell me!
Hope this help someone!

p:dialog appears on bottom when p:blockUI targets it

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>

Showing <p:panel> using <p:commandButton>

How do you display using ? is it possible?
here is my sample code. this aint working.
<h:form>
<p:panel header="Panel 1" widgetVar="panel1" id="a" >
<p:commandButton onclick="panel2.show()" value="Show Panel"/>
</p:panel>
<p:panel header="Panel 2" widgetVar="panel2" id="b" visible="false">
<p:outputLabel value="asdasdasdasdsad" />
</p:panel>
</h:form>
maybe you can put something like this at onclick action:
<p:panel header="Panel 1" widgetVar="panel1" id="a" >
<p:commandButton onclick="document.getElementById("b").visble=true" value="Show Panel"/>
</p:panel>
<p:panel header="Panel 2" widgetVar="panel2" id="b" visible="false">
<p:outputLabel value="asdasdasdasdsad" />
</p:panel>
so by defect visible = false and onclick changes to true.
solved!
adding toggleable="true" closable="true" and updating the panel (update="b") in the p:commandButton
<p:panel header="Panel 1" widgetVar="panel1" id="a" >
<p:commandButton value="Show Panel" update="b" widgetVar="btn" onclick="panel2.show()"
>
</p:commandButton>
</p:panel>
<p:panel header="Panel 2" widgetVar="panel2" id="b" toggleable="true" closable="true" visible="false">
<p:outputLabel value="asdasdasdasdsad" />
</p:panel>

Showing messages in the same growl

How can I show all validation messages in one pop up using growl, because by default every validation message on the client side creates new pop up.
Of course I could do validation on the server side and send final message to the growl but is it possible to do it on the client side?
Some code goes here:
<p:dialog id="chPwD" header="#{res['user.passwordDialogHeader']}" widgetVar="changePwV" closeOnEscape="true" resizable="false">
<p:growl id="growl" showDetail="false" life="3000" />
<h:panelGrid id="chPwPG" columns="1" cellpadding="1" transient="true">
<h:panelGrid id="chPwPGi" columns="2" cellpadding="1">
<p:outputLabel for="pwd0" value="#{res['user.oldPassword']}" />
<h:panelGroup>
<p:password id="pwd0" label="#{res['user.oldPassword']}" value="#{mngr.oldPassword}" required="true" style="width:250px;"/>
<span style="display:inline-block;"><p:message for="pwd0"/><p:messages for="pwd0"/></span>
</h:panelGroup>
<p:outputLabel for="pwd1" value="#{res['user.newPassword']}" />
<h:panelGroup>
<p:password id="pwd1" label="#{res['user.newPassword']}" value="#{mngr.newPassword}" match="pwd2" required="true" style="width:250px;"/>
<span style="display:inline-block;"><p:message for="pwd1"/></span>
</h:panelGroup>
<p:outputLabel for="pwd2" value="#{res['user.repeatNewPassword']}" />
<h:panelGroup>
<p:password id="pwd2" label="#{res['user.repeatNewPassword']}" value="#{mngr.newPassword}" required="true" style="width:250px;"/>
<span style="display:inline-block;"><p:message for="pwd2"/></span>
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
<f:facet name="footer">
<p:commandButton value="#{res['btn.apply']}" style="margin-right:20px;" update=":chPwPG" action="#{mngr.changeSelectedUserPassword}" oncomplete="handlePwChangeRequest(xhr, status, args)"/>
<p:commandButton value="#{res['btn.cancel']}" onclick="changePwV.hide();" type="button"/>
</f:facet>
</p:dialog>
you should try <p:messages showDetail="false" showSummary="true"/> and it work for me.

Spring Roo JSF: reCaptcha is not showing in a dialog

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

Resources