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
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'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.
I'm using RichFaces with JSF to develop a simple app. One page of this app contains several collapsiblePanel elements. Some of the collapsiblePanel elements are nested, but never more than a second layer.
I would like to provide links or buttons on the page to expand all and collapse all collapsiblePanel elements on the page. How can I do that?
The elements currently use the switchType="client" attribute to let the client handle the expanding and collapsing. I suspect that using a type of ajax instead may help, but I'm not sure nor do I know how I would take advantage of it.
Update: My question may be easier to understand if I include an example of what I'm trying to do:
<h:form>
<a4j:commandButton actionListener="#{bean.setDefaultExpanded(true)}"
render="reportPanel" value="Expand all" />
<a4j:commandButton actionListener="#{bean.setDefaultExpanded(false)}"
render="reportPanel" value="Collapse all" />
<h:panelGrid id="reportPanel">
<ui:repeat var="account" value="#{bean.results.entrySet().toArray()}">
<rich:collapsiblePanel expanded="#{bean.defaultExpanded}">
<ui:repeat var="chargeGroup" value="#{account.value.entrySet().toArray()}">
<rich:collapsiblePanel expanded="#{bean.defaultExpanded}">
<h:outputText value="content: #{chargeGroup.value}" />
</rich:collapsiblePanel>
</ui:repeat>
</rich:collapsiblePanel>
</ui:repeat>
</h:panelGrid>
</h:form>
The <rich:collapsiblePanel> has the expanded attribute, you can bind it to bean property and control the expansion from there. Something like this
<rich:collapsiblePanel id="panel1" expanded="#{bean.expanded}" …>
<a4j:commandButton actionListener="#{bean.togglePanels()}"
… render="panel1, panel2, …"/>
The switchType controls where the content is pulled from, not how you expand/collapse the panel.
I had the same problem when click individual panels and then expand/collapse all. This work for me (richfaces 4.2.3):
<h:commandButton immediate="true" action="#{controllerBean.toggleMin}" value="collapse all" >
<a4j:ajax render="panel1 panel2"></a4j:ajax>
</h:commandButton>
<h:commandButton immediate="true" action="#{controllerBean.toggleMax}" value="expand all">
<a4j:ajax render="panel1 panel2"></a4j:ajax>
</h:commandButton>
...
<rich:collapsiblePanel id="panel1" immediate="true" expanded="#{modelBean.expanded}" header="Title text" switchType="client">
...
</rich:collapsiblePanel>
...
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>