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();" />
Related
i have some problem when calling commandButton in primefaces
here's my code
<h:form>
<some component...>
<p:ajax update="tipe" oncomplete="PF('tipePanel').show()"/>
</some component...>
<p:panel id="tipe" visible="false" rendered="true" widgetVar="tipePanel">
<p:commandButton value="Add"
actionListener="#{soal.addDetailForm()}"
rendered="true" />
</p:panel>
</h:form>
The problem is the button can't be called when the panel is showed, but if i put the panel visible="true" from the start, the button can be called. Any idea why ?
And how should i make the button works when the panel is showed. Thanks
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.
I have the following code inside a registration form. Basically the button calls an action (an Ejb method and an Action listener which is an utility method).
When the user submits the registration form, a primefaces dialog should appear telling the user that registration is being processed. The same dialog disappears once the form is submitted. This can be achieved by Primefaces UIBlock; however, it requires the commandButton to be ajax enabled.
I thought about using : onstart = display some modal dialog & onsuccess or on complete = hide this dialog (<p:dialog widgetVar="dialog" ...) but this solution requires ajax to be enabled for primefaces commandButton.
Any clues on how I could achieve this while setting ajax to false inside a PrimeFaces commandButton?
Thanks
<h:form id="form_register">
<p:panel id="panel_register">
<div align="center" style="padding: 5px;">
<p:commandButton id="register" ajax="true"
actionListener="#{mailBean.deliverEmail(newMember.email,newMember.name, newMember.username, newMember.password, newMember.isadmin)}"
action="#{memberController.register}" value="Register"
label="Register">
<f:setPropertyActionListener target="#{requestScope.wait}"
value="#{true}" />
</p:commandButton>
</div>
<p:blockUI block="panel_register" trigger="register">
<h:outputText value="Please wait..." />
<br />
<p:graphicImage value="#{resource['gfx/gif.gif']}" />
</p:blockUI>
EDIT: Thanks guys. I was mis-using the update the attribute in commandButton. Now things work fine.
You should use the onstart and oncomplete actions to display/hide the dialog.
<p:commandButton id="register" onstart="dlg.show()" oncomplete="dlg.hide()" />
Hi I followed this code but my logout button is not at the right side of menubar.
sample from PF
here is my xhtml page
<h:body>
<p:menubar autoDisplay="false">
<p:menuitem value="Home" url="/index.jsf" />
<p:submenu label="Maintenance" >
<p:menuitem value="Course" url="/views/course/list.jsf" />
<p:menuitem value="Student" url="/index.jsf" />
</p:submenu>
<f:facet name="options">
<p:commandButton type="button" value="Logout" icon="ui-icon-extlink" />
</f:facet>
</p:menubar>
</h:body>
You should use a style="float: right;" inside the button or include the property into your css stylesheet.
I am able to get the logout to the right by using the below code
<f:facet name="options">
<p:commandButton type="button" value="Logout" />
</f:facet>
Use: inputText style="margin-right:10px" in the facet... Surely will work.
It will work only in primefaces 3.5 change to primefaces 3.5 and it will work you can verify this at primefaces link primefaces blog
For more details go to primefaces showcase page primefaces showcase menubar sample page for sample code this code is from that sample page
<f:facet name="options">
<p:inputText style="margin-right:10px"/>
<p:commandButton type="button" value="Logout" icon="ui-icon-extlink" />
</f:facet>
if your using prime-faces 5, then it should work. Try to browse your application in a web browser instead of the IDE your using to code. Because It's not appear as we expected in the IDE but it's work fine in a web browser. You can also use styleClass inside the tag. insert styleClass="margin-riight:10px" inside the button tag
I am using JSF for my project front end.
How I can I open a new window with backing bean?
Set target="_blank" on the <h:commandLink> or <h:form>.
E.g.
<h:form>
<h:commandLink value="Open in new window" action="#{bean.action}" target="_blank" />
</h:form>
or
<h:form target="_blank">
<h:commandButton value="Open in new window" action="#{bean.action}" />
</h:form>
In addition to BalusC answer.
Kind of hacky solution in situation when:
commandLink cannot be used in UI (because of page styling or any other reason)
target of the form cannot be changed
<!-- Group and render them together.-->
<h:panelGroup rendered="#{mybean.showButton}">
<!-- Visible and clickable commandButton. No action, just onclick js event.-->
<h:commandButton value="My Commandbutton"
onclick="document.getElementById('myForm.realTargetBlankLink').click();"/>
<!-- Invisible link. Action, target _blank.-->
<h:commandLink id="realTargetBlankLink" action="#{myBean.myDesiredAction}"
target="_blank"/>
</h:panelGroup>