primefaces dialog inside another dialog set modal true - primefaces

In my project I use dialog inside another dialog box that both dialog I set modal=true that situation click to open dialog box it will open button any action is not performed when I remove modal=true in test2 it will work fine.I use modal in test it not fine.
<p:dialog widgetVar="test1" modal="true"..>
...
<p:commandButton action="#{user.Button1}" oncomplete="PF('test2').show()"/>
</p:dialog>
<p:dialog widgetVar="test2" modal="true"..>
...
<p:commandButton action="#{user.Button2}" oncomplete="PF('test3').show()"/>
</p:dialog>
<p:dialog widgetVar="test3" modal="true"..>
...
</p:dialog>

in second put modal = false . it will work

Have you tried adding the appendTo?
appendTo="..."
And check this: Primefaces's dialog 'appendTo' property, what it useful for?
It worked for me.

Related

Update primefaces dialog on show

I'm trying to update a primefaces dialog every time it pops up.
The dialog is triggered by a calendar field changing and the actual call is made from the bean.
When I call it the first time, the datas are fine but, if I close it and open it again, it'll still show the old datas.
It kinda makes sense: it's rendered just once and then it's shown and hidden and never actually updated.
I was thinking about updating it before the dialog.show() in the bean, but I don't know how to do that.
Any idea?
<p:dialog
site ="sectionDlg"
widgetVar ="Dlg"
minWidth ="430"
modal ="true"
closable ="true"
resizable ="false"
dynamic ="true"
width="450" height="300"
>
<h:form id="Form">
<br/>
<p:panelGrid id ="dates" styleClass="cmt-no-grid-100perc" columns="4">
<calendar attribName ="offerStartDateDlg"
value ="#{bean.startDate}"
writable ="#{false}"/>
<calendar attribName="offerEndDateDlg"
value="#{bean.endDate}"
writable="#{false}"/>
</p:panelGrid>
<div align="center">
<p:commandButton
onclick ="PF('whichSectionDlg').hide()"
>
</p:commandButton>
<p:commandButton
onclick ="PF('whichSectionDlg').hide()">
</p:commandButton>
</div>
</h:form>
This could make things easier
Ok so, I managed to figure it out.
I solved it by updating it from the bean, right before the call
public void show_dlg_method(){
RequestContext.getCurrentInstance().update("Dlg");
RequestContext.getCurrentInstance().execute("PF('Dlg').show()");
}
with "Dlg" being the widgetVar attribute value.
Some code of what you already have is always helpful. However, depending on what triggers the dialog to show up you can:
add an update to the triggering link/button/whatever or
initiate the update by the dialog itself like shown below.
<h:form>
<p:remoteCommand name="updateDialog" update="dialogpanelid" />
</h:form>
<dialog onShow="updateDialog">
<p:outputPanel id="dialogpanelid"> your content here </p:outputPanel>
</dialog>
Note that:
You need the remoteCommand to reside inside h:form
You should always update the dialogs content, not the dialog itself
the client-side id might differ depending on your page structure.

Primefaces Dialog closes when called the second time

I have a datatable, with a command Button in each row,
The issue is that when i need to open one dialog for the first one, and then by clicking on another button, i need to update it. The issue is when i click on the second button, it closes the dialog and the user have to click once again on the second button to open the dialog again!
Thank's in advance for your help,
i'm here for further explanation
to my knowldege,You can open as many dialog as you want, only make sure that you gave them a unique widgetVar id:
<p:dialog widgetVar="dlg1">
<h:outputText value="Hello from first dialog"/>
</p:dialog>
<p:dialog widgetVar="dlg2">
<h:outputText value="Hello from second dialog"/>
</p:dialog>
...
<p:commandButton value="Open First" onclick="dlg1.show()"/>
<p:commandButton value="Open Second" onclick="dlg2.show()"/>
Clicking on the commandButton above will open two separate dialog parallelly.
I think your buttons made an update to the entire Naming Container that wraps your Dialog. If u do that, that's what you get.
You should update Container inside your Dialog that wraps your component inside.
Example :
Don't :
<h:panelGrid id="gridContainer">
<p:dialog id="dialogComponent>
// components
</p:dialog>
</h:panelGrid>
<p:commandButton update="#{p:component('gridContainer')}"/>
Do :
<h:panelGrid id="gridContainer">
<p:dialog id="dialogComponent>
<h:panelGrid id="insideContainer">
// components
</h:panelGrid>
</p:dialog>
</h:panelGrid>
<p:commandButton update="#{p:component('insideContainer')}"/>
I think you get the idea.
Hope it helps.

Primefaces dialog doesn't close the second time

I use a dialog to show newsletters. The first time, everything goes ok: the dialog pops up and it can be closed using the X and using the extra button 'close'
<h:form id="frmDialog">
<p:dialog header="...: NEWS :..."
widgetVar="widgetInfo" modal="true" dynamic="true">
<p:commandButton value="close" onclick="widgetInfo.hide();"/>
<p:outputPanel id="pnlNewsLetter" style="width:610px;">
<ui:include src="#{corporateManager.newsLetter}"/>
</p:outputPanel>
</p:dialog>
</h:form>
....
When I click the button to reopen the same dialog, it opens, but can't be closed. In stead of closing, hitting the X button or the 'close' button, the entire content of the dialog gets selected and the page becomes inresponsive
.....
<h:form>
<h:commandButton image="/newsletters/img/1karel.png" onclick="widgetInfo.show();">
<f:ajax render=":frmDialog:pnlNewsLetter"/>
<f:setPropertyActionListener value="/newsletters/2012-12-21.html" target="#{corporateManager.newsLetter}"/>
</h:commandButton></h:form>
..... i've tried using p:commandButton, using oncomplete(), closable="false", used h:button, added/removed form-tags or id's etc...
Environment: Glasfish3.1.2 - Netbeans 7.3 - Primefaces 3.1 - Google Chrome 27.0.1453.94 m
Thanks to another post I've missed yesterday: dialog will not close primefaces ,
I've changed my code and it runs as expected, showing for each button another newsletter:
<p:commandButton oncomplete="widgetInfo.show();" value="" styleClass="karel4"
update=":pnlNewsLetter">
<f:setPropertyActionListener value="/newsletters/2013-03-19.html" target="#{corporateManager.newsLetter}"/>
</p:commandButton>
I had to remove <f:ajax render=":pnlNewsLetter"/> because otherwise the first newsletter was shown even when another button was clicked.
Many Thanks!

primefaces show panel when a task completed

I have a button in primefaces, that when is pressed I make some calculations and a new panel should appear showing the results.
I have the code
<p:commandButton value="Submit"
ajax="false" actionListener="#{myBean.search}" oncomplete="panelwv.show();">
</p:commandButton>
<p:panel widgetVar="panelwv" visible="false" closable="true"
toggleable="true">
So, when the button is clicked, the MyBean.search method is called, and when is finished I want the panel "panelwv" to appear, but it does not.
What am I doing wrong?
Thank you!
oncomplete can only be executed if ajax is true. Otherwise the whole page is reloaded. You will probably also want to update the contents of your panel by giving it an id and setting the update property of the command button to this id.

Proper Construct for Primefaces Dialog

I am getting confused on the constrcut of a Primefaces 3 dialog.
I see question in SO that has this pattern. The form is outside the dialog.
<h:form>
<p:dialog id="dialog" modal="true" widgetVar="dlg">
</p:dialog>
</h:form>
But other question has this.
<p:dialog id="dialog" modal="true" widgetVar="dlg">
<h:form>
</h:form>
</p:dialog>
The Primefaces showcase http://www.primefaces.org/showcase/ui/dialogLogin.jsf favors the latter one.
I am getting confused if there's any valid reason for using the one over the other?
Thanks
You always better use place the <h:form> inside <p:dialog like this
<p:dialog id="dialog" modal="true" widgetVar="dlg">
<h:form>
</h:form>
</p:dialog>
cause you dialog content might be "taken" out from your page and appended some where else in your DOM tree , so if you place the dialog inside some form, it can cause your dialog to be relocated somewhere else and to cause all your buttons/links and other elements to stop working (this is a very common question here in SO)
So in order to be allays on the safe side place you <h:form> tag inside your <p:dialog tag
Another example is when you use appendToBody="true" in dialog :
if dialog is inside an h:form component and appendToBody is enabled, on the browser
dialog would be outside of form and may cause unexpected results. In this case, nest a form inside
a dialog.