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!
Related
I have this simple form example :
<h:form id="testForm">
<p:commandButton ajax="false" value="New" />
</h:form>
If I click in the button and then refresh the page. The browser notifies that the form will be sent again. How can I avoid this ?
Thanks.
Agree on the duplicate, however there are no examples. One option would be to use
<p:commandButton ajax="false" value="New" action="page.xhtml?faces-redirect=true"/>
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.
I have a dialogue with a commandButton, and this is what I'm trying to do:
Do some Java work
Update a Primefaces tab
Make my dialogue box disappear
Go to that certain tab.
This is the code I'm using:
<p:commandButton value="Submit"
action="<some java work>"
oncomplete="dialogue.hide(); sideTabs.select(1)"
update="<update side tab">
</p:commandButton>
The problem is, this only works once between refreshes. What I mean is, I click the button, and everything works fine-the tab changes to the requested tab, the tab is updated, and the dialogue disappears. But when I click the button again, the requested tab is indeed selected, but isn't properly refreshed until I hit f5. Once I do that, I can click the dialogue button again and the tab will properly refresh again, but once again, only once - until I hit f5 again. So, something like this:
Click the button -> see 1 item in the tab
Click the button again -> still see only 1 item in the tab
Hit f5 -> see 2 items in the tab
Click the button -> see 3 items in the tab
Click the button again -> still see 3 items in the tab
Hit f5 -> see 4 items in the tab
etc...
Does anyone have an idea why this is happening? Do I need to add some page refresh mechanism to my commandButton? If so, how is this done?
Thanks!!!
I've tried to replicate the problem with no success.
Here is a the attribute from my ViewScoped bean:
private String str1 = "a";
private String str2 = "b";
private String update = ":f:t";
private Integer index = 0;
And here is the view:
<h:form id="f">
<p:tabView id="t" widgetVar="tVar" activeIndex="#{viewMBean.index}" >
<p:tab id="a" title="A" >
#{viewMBean.str1}
</p:tab>
<p:tab id="b" title="B">
#{viewMBean.str2}
</p:tab>
</p:tabView>
</h:form>
<p:dialog id="d" widgetVar="dVar">
<h:form>
<p:inputText value="#{viewMBean.str1}" />
<br />
<p:inputText value="#{viewMBean.str2}" />
<br />
<p:inputText value="#{viewMBean.update}" />
<br />
<p:inputText value="#{viewMBean.index}" />
<br />
<p:commandButton value="Submit" update="#{viewMBean.update}" oncomplete="dVar.hide();" />
</h:form>
</p:dialog>
I believe the problem is somewhere else in your code.
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.
I want to show a dialog box on the click of a primefaces commandbutton. Before the dialog box , I need to check a condtional.
I am using Spring web-flow 2.3.0.
So I am doing it like this ,
And the Dialog Box is
I am not able to show this dialog box based on this condition.
Please help me ,any pointers?
SWF 2.3.0 Primefaces 2.2.1 JSF 2 Spring Security 3 Spring 3.1.0M1I EhCache Apache Tomcat 6.0 STS 2.5.1
So I have changed my code as per below
<p:commandLink id="addRequest" immediate="true" value="addreq"
oncomplete="dlg3.show()" update="dialogPanel">
<f:setPropertyActionListener
value="#{searchHandler.selectedAccIns}"
target="#{reqSearchHandler.checkAccStatus}" />
</p:commandLink>
And the dialog box is
<p:outputPanel id="dialogPanel"
rendered="#{not reqSearchHandler.accStatusFlag}">
<p:dialog header="Effect Dialog" widgetVar="dlg3"
showEffect="bounce" hideEffect="explode" height="200">
<h:outputText
value="Account is #{searchHandler.selectedAccIns.accStatusDesc}" />
<h:outputText value="Do you want to continue?" />
<div align="left">
<p:commandButton value="Yes" action="accept" />
<p:spacer width="960" height="5" />
<p:commandButton value="No" action="cancel" />
</div>
</p:dialog>
</p:outputPanel>
But when I am clicking on the command link , I am getting 3 dialog boxes. Can you please tell me why it is so?
Somebody else just posted the same problem! :)
You should use the oncomplete attribute instead of onclick of the commandButton. The click javascript event occurs before the page posts back, likely causing your dialog not to appear because of the page reloading.
oncomplete="dlg3.show()" will display the dialog AFTER the postback.