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>
Related
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()"/>
The following code in my .xhtml works fine:
<h:commandButton id="btnConsultar"
action="#cadastrarProponenteBean.consultarCnpj}"
value="#{messages.tx_consultar}"
styleClass="btnAcao" />
But, when I add a4j:support:
<h:commandButton id="btnConsultar"
action="#{cadastrarProponenteBean.consultarCnpj}"
value="#{messages.tx_consultar}"
styleClass="btnAcao">
<a4j:support event="onclick" />
</h:commandButton>
the application breaks, I get strange errors, and my validation messages('getFacesContext().addMessage') are not shown.
Since I'm using a4j:support just to show a loading gif when user clicks, any advice on how to fix this problem?
I'm using JSF and RichFaces.
PS: already tried a4j:commandButton instead of h:commandButton but same problems...
You should use <a4j:status> similar to:
<a4j:status id="ajaxstatus" rendered="true">
<f:facet name="start">
<h:panelGroup>
<h:graphicImage value="/images/loading.gif" />
</h:panelGroup>
</f:facet>
<f:facet name="stop">
</f:facet>
</a4j:status>
I have it in template. Loading image is displayed during any long action.
I'm trying to open a new window from dataTable using primefaces. I've tried differents options:
h:commandLink
<h:form id="form" target="_blank">
<p:dataTable id="Table" var="var_row" value="#{bean.table}" sortBy="tableId" >
<p:column>
<h:commandLink action="#{bean.goToPage}" value="Open Page"
onblur="this.form.target='_self'">
<f:setPropertyActionListener value="#{var_row}" target="#{bean.rowSelected}" />
</h:commandLink>
</p:column>
</p:dataTable>
</h:form>
2.p:commandLInk
<h:form id="form" target="_blank">
<p:dataTable id="Table" var="var_row" value="#{bean.table}" sortBy="tableId" >
<p:column>
<p:commandLink action="#{bean.goToPage}" value="Open Page"
onblur="this.form.target='_self'"
process="#this" ajax="false" target="_blank">
<f:setPropertyActionListener value="#{var_row}" target="#{bean.rowSelected}" />
</p:commandLink>
</p:column>
</p:dataTable>
</h:form>
It works, but not correctly. I mean, I get the new page open, but the original page becomes useless, all methods in this pages are not invoked when you clicked on them.
Has anyone experimented this before? Any idea to solve this?
I tried and I still couldn't get a 'commandLink' to open in a new window while at the same time using 'setPropertyActionListener'. I think you have to modify the underlying Primefaces javascript to open in a new window (I didn't try that).
You can try passing a parameter argument.
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
How can I set _blank as target of a h:button or p:button?
Right now I have a simple link:
<h:outputLink value="#{bean.url}" target="_blank">
<h:outputText value="Link" />
</h:outputLink>
But I wanted it to look like a button (a primefaces styled button if possible) so I decided to change it by a p:button.
<p:button value="Link" href="#{bean.url}" />
But now I can't set the target value as I want.
Does anybody has an idea?
A little javascript will help:
<p:button value="Link" onclick="window.open('#{bean.url}'); return false;" />
The EL expression will be replaced before javascript is executed.
I used :
<h:form target="_blank">
<p:commandButton value="Run" action="#{bean.createReport}" />
</h:form>
and this is ok.
add ajax="false" to primefaces commandButton
set target in p:button, not in form