I am using primefaces dialogbox for popup purpose. But everytime it gets opened the whole screen get refreshed automatically and the popup disappears.
< p:dialog id="dialog" header="Select different user" styleClass="atf-header" widgetVar="dlg" appendToBody="true">
<ui:include src="searchpopup.xhtml" />
</p:dialog>
<h:panelGroup>
<h:outputLabel value="#{I18N['Create_Ticket_for_other_users']}" styleClass="atf-header" style="width:600px"></h:outputLabel>
</h:panelGroup>
<h:panelGroup id="search_section" layout="block"
styleClass="atf-content-area atf-separarot-botton" style="width:600px">
<h:panelGroup id="input_search_section" >
<h:outputText id="name" value="Siddharth Mishra"
labelStyleClass="atf-label">
</h:outputText>
</h:panelGroup>
<h:panelGroup styleClass="atf-right atf-inline-block">
<p:commandButton id="btn_search" value="select different user"
styleClass="atf-button-search" onclick="dlg.show()">
</p:commandButton>
</h:panelGroup>
</h:panelGroup>
You p:commandButton is AJAX button (which is default in primefaces) which submits whole form. Add type="button" attribute to it so it will be just ordinary button which do some JavaScript (so called push button). Also I don't see where is h:form tag here. As you have appendToBody="true" in you p:dialog be shore that you don't encapsulate p:dialog inside h:form. You should have h:form inside p:dialog if it is necessary, and if it is not move p:dialog outside of h:form.
Related
I have this code:
<h:form>
<h:button value="SHOW" onclick="PF('myPanel').show()" />
<p:dialog header="MyPanel" widgetVar="myPanel">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
</h:form>
Clicking the button only flashes the dialog -- opens and immidiatelly closes it. Also tried using JSF commandButton with same result. Using a primefaces button works as expected, so what is JSF button missing here?
use <p:commandButton> instead.
<p:commandButton value="Basic" type="button" onclick="PF('dlg1').show();" />
I have several inputText boxes on a page with associated edit/submit buttons (which work). I want to make it so that when the user presses enter from inside the inputText box, the form is submitted. For one of my forms, it works, for the other, it doesn't. Here's the one that doesn't work:
<h:form>
<iframe src="#{appInfo.documentation}"/>
<h:commandButton value="Edit" >
<f:ajax listener="#{appInfo.editDoc}" render="#form"/>
</h:commandButton>
<h:commandButton value="Save" >
<f:ajax listener="#{appInfo.saveDoc}" render="#form"/>
</h:commandButton>
<h:inputText value="#{appInfo.documentation}" >
<!-- pressing enter causes page refresh -->
<f:ajax/>
</h:inputText>
</h:form>
And the one that does:
<h:form>
<h:dataTable id="table" value="#{appInfo.model.apps}" var="a">
<h:column>
<f:facet name="header">URL</f:facet>
<h:outputText value="#{a.url}"/>
<h:inputText value="#{a.url}">
<!-- pressing enter does NOT causes page refresh -->
<f:ajax/>
</h:inputText>
</h:column>
</h:dataTable>
... command buttons
</h:form>
Any ideas?
Pressing "Enter" in an input field fires the same behaviour like clicking the first button of that form. In your second example there is no button at all. As soon as you add e.g. a commandButton there (like in the first example), the enter will be executed like expected.
I am trying to show a popup menu in by checking some conditions, such as if something is not selected show popup etc. and if everyhing is fine submit the page. Here is the code:
<h:commandButton onclick="if (#{moneyTransferManager.showPopup()})
#{rich:component('popup')}.show();" value="Devam" >
<rich:componentControl target="popup" operation="show" />
</h:commandButton>
<rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="Simple popup panel" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('popup')}.hide();
return false;">
X
</h:outputLink>
</f:facet>
<p>
The popup panel is open and closed from the javascript function of component client side object. The following code
hide this panel:
<f:verbatim>#</f:verbatim> #{rich:component('popup')}.hide()
</p>
</rich:popupPanel>
then after button is clicked, popup shows for like a second and then page is refreshed and popup is lost. To prevent refreshing page i tried:
<f:ajax execute="#form" render="#none" />
but then if everything is right and if i don't need a popup i need to submit the page by commandbutton, but since i say render=#"none" i cannot do this. So what can i do about this situation?
Thanks
<h:commandButton> has a default button type submit which submits enclosing h:form when it is clicked. That is why the page refreshes when you click.
<h:button> should be used for java script usage.In addition, <h:commandButton> becomes <h:button> if type attribute is set to button.
<h:button onclick="if (#{moneyTransferManager.showPopup()})
#{rich:component('popup')}.show();" value="Devam"/>
Or
<h:commandButton type="button" onclick="if (#{moneyTransferManager.showPopup()})
#{rich:component('popup')}.show();" value="Devam" >
See Also :
Difference between h:button and h:commandButton
I am using Primefaces 3.4.2 with JSF 2.0
I have the following in a dialog popup in JSF page.
<p:dialog header="Create New Request" style="font-weight:bold"
widgetVar="newDialog" resizable="false" id="newDlg"
showEffect="fade" hideEffect="fade" appendToBody="true"
modal="true" position="center top" width="850" height="450">
<p:panelGrid columns="2">
<h:outputLabel value="Employee" for="employee" />
<p:selectOneMenu id="employee" value="#{mymb.employee}"
converter="#{employeeConverter}">
<f:selectItems value="#{mymb.employeeItems}" var="emp"
itemLabel="#{emp.employeeName}" itemValue="#{emp.employeeNumber}"/>
<p:ajax listener="#{mymb.loadDepartments}" process="#this"/>
</p:selectOneMenu>
</p:panelGrid>
<p:separator />
</p:dialog>
If I use appendToBody="true", then selectOneMenu Converter class doesn't gets invoked, but if I make it appendToBody="false", then Converter class gets invoked.
What could be the reason for this? appendToBody="false" makes my popup dialog unusable, not able to navigate using mouse.
How can I resolve this issue?
Remove the appendToBody and put an <h:form/> inside your dialog(along with it's content).
The purpose of appendToBody="false" is to ensure your dialog is rendered within the body (and hence within the main <h:form/>) of the HTML output.
Without appendToBody="false" , the dialog might end up being appended to the end of the markup in <body/> and as a result, nothing inside it will get executed.
Adding <h:form/> to your dialog ensures that even if it winds up outside the <body/> it will still be able to submit to the server
I have a dialog that contains no content on page load and I'm dynamically setting the content of a dialog box based on the link that a user clicks on.
<p:dialog widgetVar="dlg" modal="true" id="dialog">
<p:panel id="fullArticle">
<h:outputText value="#{content.newsArticle}" escape="false" />
</p:panel>
</p:dialog>
...
...
<p:commandLink value="Read more" actionListener="#{content.getFullArticle}" onclick='dlg.show();' update=":fullArticle">
<f:attribute name="contentId" value="#{news.contentId}" />
</p:commandLink>
The problem i'm having is that when you click the "Read More" link, it shows the dialog, but the dialog is not centered on the page. If i change the udpate attribute on the commandLink to update=":dialog", the dialog flashes as if it's opening and then closing right away.
How can I update the dialog and have it be centered with dynamic content?
The onclick is executed before the ajax request. You need to open the dialog in oncomplete instead. This will be executed after the ajax request and update. The <p:dialog> is namely by default hidden unless its visible attribute evaluates true.
<p:commandLink value="Read more" actionListener="#{content.getFullArticle}"
update=":dialog" oncomplete="dlg.show()">
Unrelated to the concrete problem, are you aware that you can pass fullworthy objects as method arguments since EL 2.2? This makes the <f:attribute> and actionListener "hack" superfluous:
<p:commandLink value="Read more" action="#{content.getFullArticle(news)}"
update=":dialog" oncomplete="dlg.show()" />
I had the same problem.
Updating the dialog makes it disappear and reappear (and forget its position).
To solve it, I created a wrapper tag around the dialog content.
<p:commandLink update=":playerViewDialogHeader,:playerViewDialogContent"
oncomplete='playerViewDialogJS.show()' value='#{item.name}' />
<p:dialog id='playerViewDialog' widgetVar='playerViewDialogJS'>
<f:facet name="header">
<h:outputText id="playerViewDialogHeader" value="#{playerController.objectView.name}" />
</f:facet>
<h:form id='playerViewDialogContent'>
<!-- CONTENT GOES HERE -->
</h:form>
</p:dialog>