I am trying to have a p:splitButton p:menuItem launch a p:dialog. I have the following
<h:form>
<p:splitButton value="Action" icon="ui-icon-circle-triangle-s">
<p:menuitem value="New label" icon="ui-icon-newwin">
<p:commandLink onclick="PF('dlg1').show();"/>
</p:menuitem>
</p:splitButton>
<p:dialog header="Modal Dialog" widgetVar="dlg1" modal="true" height="100">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
</h:form>
I can't however see the "New label" menu item in the list. Is what I'm trying to achieve possible?
Managed to fix it like so
<h:form>
<p:splitButton value="Action" icon="ui-icon-circle-triangle-s">
<p:menuitem value="New label" icon="ui-icon-newwin" onclick="PF('dlg1').show();" />
</p:splitButton>
<p:dialog header="Modal Dialog" widgetVar="dlg1" modal="true" height="100">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
</h:form>
Related
i have a problem with the display of a dialog on a click. It's a obvious one but i can't spot the bug. I've been stuck on this for days, it's crazy. Can you help me please.
<h:form id="form">
<p:commandButton
rendered="#{characterBean.characterSession.characterName ne null}"
value="#{characterBean.characterSession.title.titleName}"
icon="fa fa-fw fa-edit" onclick="PF('dlg').show();"
update="#form"/>
<p:dialog id="titleDetail" header="#{i18n['title.yourTitles']}"
widgetVar="dlg" dynamic="true" closable="false" resizable="false"
showEffect="fade" hideEffect="fade">
<h:panelGroup>
<p:messages autoUpdate="true" />
<h:selectOneMenu id="titleSelect" converter="#{titleConverter}"
value="#{characterBean.characterSession.title}">
<f:selectItems value="#{characterBean.titleUnlocked}" var="t"
itemValue="#{t}" itemLabel="#{t.titleName}" />
</h:selectOneMenu>
<hr />
<h:panelGrid columns="2" style="width: 100%; text-align:center">
<p:commandButton value="#{i18n['general.submit']}"
icon="fa fa-check"
actionListener="#{characterBean.updateCharacterTitle}"
oncomplete="PF('dlg').hide();" update="#form" />
<p:commandButton value="#{i18n['general.cancel']}"
icon="fa fa-close" action="#{characterBean.submitCancel}"
oncomplete="PF('dlg').hide();" update="#form" process="#this" />
</h:panelGrid>
<p:remoteCommand name="updateForm()" process="#this" update="#form" />
</h:panelGroup>
</p:dialog>
</h:form>
The core problem is essentially this:
<h:form>
<p:commandButton onclick="PF('dlg').show();" update="#form"/>
<p:dialog widgetVar="dlg">
...
</p:dialog>
</h:form>
The default state of <p:dialog> is hidden.
The onclick shows the dialog.
The update updates the entire content of the <h:form>.
The <p:dialog> is also included in the update.
So, the <p:dialog> gets hidden again.
There are several solutions:
Don't let update include the <p:dialog>.
<h:form>
<h:panelGroup id="outsideDialog">
<p:commandButton onclick="PF('dlg').show();" update="outsideDialog"/>
</h:panelGroup>
<p:dialog widgetVar="dlg">
...
</p:dialog>
</h:form>
Replace onclick by oncomplete as it runs after the update.
<h:form>
<p:commandButton update="#form" oncomplete="PF('dlg').show();" />
<p:dialog widgetVar="dlg">
...
</p:dialog>
</h:form>
Move <p:dialog> outside the <h:form> and give it its own <h:form>.
<h:form>
<p:commandButton update="#form :dlg" oncomplete="PF('dlg').show();" />
</h:form>
<p:dialog id="dlg" widgetVar="dlg">
<h:form>
...
</h:form>
</p:dialog>
or, depending on whether you actually need to update the dialog's contents or not
<h:form>
<p:commandButton onclick="PF('dlg').show();" update="#form" />
</h:form>
<p:dialog widgetVar="dlg">
<h:form>
...
</h:form>
</p:dialog>
The recommended solution is 3.
See also:
Execution order of events when pressing PrimeFaces p:commandButton
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
p:commandbutton action doesn't work inside p:dialog
I have a primefaces menu which items are disabled on a condition from backing bean.
The problem is, that the conditions are processed after the update.
If I select a node which has every item enabled and switch to a node where everything is disabled,
the menu is reloaded but shows everything enabled for a second before the items are disabled.
Is there a way to process the disabled-conditions before the menu is shown?
<h:form id="form">
<p:tree id="tree" ...>
<p:ajax event="select" update=":form:tree:menu" listener...>
<p:treeNode id="treenode">
<p:commandButton id="btn" type="button" />
<p:overlayPanel for="btn">
<p:menu id=menu">
<p:menuitem .... disabled="#{bean.condition1}" />
<p:menuitem .... disabled="#{bean.condition2}" />
...
</p:menu>
</p:overlayPanel>
</p:treenode>
</p:tree>
EDITED
Hide the menu items at the beggining of the ajax call and show them when it is completed. The source code in the page would be:
<p:tree id="tree" value="#{bean.root}" var="node" selectionMode="checkbox">
<p:treeNode id="treenode">
<p:commandButton id="btn" value="#{node}"
onstart="$('.ui-overlaypanel-content').css('display','none');"
oncomplete="$('.ui-overlaypanel-content').css('display','block');"
actionListener="#{bean.processAndUpdateConditions}" update="mymenu"/>
<p:overlayPanel for="btn">
<p:menu id="mymenu" >
<p:menuitem value="Condition 1" disabled="#{bean.condition1}" />
<p:menuitem value="Condition 2" disabled="#{bean.condition2}" />
</p:menu>
</p:overlayPanel>
</p:treeNode>
</p:tree>
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>
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>
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