I need an answer to exactly this question posted in 2013 please.
I have a PrimeFaces menuitem with a url attribute that calls an xhtml, that 'defines' content to go into a layoutUnit. When clicked, the entire page doesn't reload, just the layout unit.
How do I display a PrimeFaces Extensions blockUI component when the menuItem is clicked?
I've tried:
<p:menuitem value="Users" url="/users.xhtml" onstart="PF('blockUIWidget').block()" oncomplete="PF('blockUIWidget').unblock()"/>
where the blockUIWidget is:
<pe:blockUI widgetVar="blockUIWidget">
<h:panelGrid columns="2">
<h:graphicImage library="images" name="loading.gif"/>
<h:outputText value="Loading"/>
</h:panelGrid>
Note, this widget works as expected from a commandButton:
<p:commandButton value="Login" action="submit" onstart="PF('blockUIWidget').block()" oncomplete="PF('blockUIWidget').unblock()"/>
Related
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.
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'd like to place a whole page inside a PrimeFaces library UI component lightBox.
For example I have:
Normal_page.xhtml
Popup_page.xhtml
Is it possible to launch Popup_page.xhtml from Normal_page.xhtml and display it inside lightBox so that Popup_page would be overlayed over Normal_page?
p.s.
I used to do this using <p:dialog> and <ui:include>, like so:
<p:dialog widgetVar="myPopup"...>
<ui:include src="/Popup_page.xhtml"/>
</p:dialog>
and
<p:commandButton onclick="myPopup.show();"/>
but this doesn't seem to work with <p:lightBox>.
Both of these methods worked for me:
LightBox inline method:
<p:lightBox>
<h:outputLink value="#">
<h:outputText value="Open Lightbox Popup (using inline)"/>
</h:outputLink>
<f:facet name="inline">
<ui:include src="popup_Page.xhtml"/>
</f:facet>
</p:lightBox>
LightBox iframe method:
<p:lightBox iframe="true">
<h:outputLink value="popup_Page.xhtml">
<h:outputText value="Open Lightbox Popup (using iframe)"/>
</h:outputLink>
</p:lightBox>
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>
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>