I have a form and two commandbuttons embedded in it as shown.
<h:commandButton label="Submit" type="button"
image="resources/images/Save4.jpg"
actionListener="#{userController.createNewUser()}" />
<h:commandButton label="Home"
image="resources/images/Save4.jpg"
action="/index.jsf?faces-redirect=true" />
Clicking on Home button should redirect to index.jsf but it causes form submission. I dont want to put the home command in another form tag as it will cause UI Distortion. Please suggest a way out.
A command button submits the entire POST form. It's the wrong tool for plain page-to-page navigation. It's not SEO friendly either (searchbots don't index POST forms).
If the sole functional requirement is having a clickable image which should navigate to a different page, then just use <h:link><h:graphicImage>.
<h:link outcome="/index.jsf">
<h:graphicImage name="images/Save4.jpg" />
</h:link>
It's a bad idea to use POST for navigation, anyway. Instead, use something like this:
<h:button label="Home" image="..." outcome="/index" />
Related
I have the below output link which does its job:
<h:outputLink value="#{verDocumentoController.url()}" target="_blank">
show document
</h:outputLink>
It opens an URL obtained as a bean property in a new window.
However, I'd like to turn the link into a button in PrimeFaces look'n'feel. I tried as below:
<p:commandButton value="show document" action="#{verDocumentoController.url()}"
onclick="form.target='_blank'" ajax="false" />
But it only reopens the current page in a new window and not the URL specified as bean property. How can I achieve this anyway?
The <p:commandButton> basically submits a POST request to the URL as specified by its parent <h:form>, which defaults indeed to the current request URL (you know, "postback"). The action attribute basically invokes a bean method and uses the returned value as navigation case outcome. An URL does not necessarily represent a sensible navigation case outcome.
Just use window.open() instead on a simple <p:button>.
<p:button value="show document"
onclick="window.open('#{verDocumentoController.url()}');return false;" />
You can also do this on a <p:commandButton>, but that's unnecessarily overcomplicated.
I want to prevent from multiple clicking button in JSF but every attempt does not work. Action in that button is responsible for loading data to table.
I have something like that:
<h:commandButton class="inputButton bFind" action="#{backingBean.load}" value="#{msgc.find}" />
but that line allows users to click that button even before action ends.
When I try to do something like that:
<a4j:commandButton class="inputButton bFind" onclick="this.disabled=true" oncomplete="this.disabled=false" action="#{backingBean.load}" value="#{msgc.find}" />
or
<a4j:commandButton class="inputButton bFind" onclick="this.disabled=true" oncomplete="this.disabled=false" action="#{backingBean.load}" value="#{msgc.find}" />
then button is blocked and its prevent from multiple clicking but then I must refresh site to see data in table. :/
I have no idea what i should do to this.
Ok i did it. Thx "#Xtreme Biker" for help. All what I need to do is add reRender attribute:
<a4j:commandButton class="inputButton bFind" onclick="this.disabled=true" oncomplete="this.disabled=false" action="#{backingBean.load}" reRender="dataTable_#{backingBean.id}" value="#{msgc.find}" />
and put content which should be rerendered to
<a4j:outputPanel id="dataTable_#{backingBean.id}" ajaxRendered="true">
</a4j:outputPanel>
I am trying to achieve the following, though with a button.
<h:outputLink value="/admin/category/read">
Cancel
<f:param name="cat" value="" />
<f:param name="subcat" value="" />
</h:outputLink>
I have tried using h:button, though the outcome property does not work since /admin/category/read is not a specified navigation-case.
How to use a button as link, without having to use a navigation-case or server side method?
No, there's no solution using JSF attributes, at least not if you really don't have a navigation case for the h:button.
If possible, I'd advise to use CSS styling as already mentioned in the comments.
But h:button just creates a plain HTML link with onclick="window.location.href=URL". So if you really want, you can build the URL yourself and just use a plain HTML input button like this:
<input type="button" value="Cancel"
onclick="window.location.href='/admin/category/read?cat=&subcat='; return false;" />
Related:
Difference between h:button and h:commandButton
When should I use h:outputLink instead of h:commandLink?
I'm using JSF 2.0 and I have a problem with navigation after both commandLink and commandButton. I use following code:
<h:commandLink action="login?faces-redirect=true"
value="#{showElementBean.showElement()}"> Login </h:commandLink>
<h:commandButton action="login?faces-redirect=true" value="Move to login.xhtml" />
These tags are inside a form, login is just an example. Result of clicking on rendered controls is always POST with refresh of a current page. What do I wrong?
Edit:
According to comments of BalusC I' adding real code fragment:
<h:commandLink actionListener="#{showElementBean.showElement(element)}"
value="View" > </h:commandLink>
I have a page with a list of elements and I want to add links that leads to element view page. Thus I need to pass this element to a show page. I'm JSF primer, e.g. in Rails I'd use GET and URL params, but I don't know how to do it 'in JSF-way'.
There are a lot of possible causes for this behaviour. They are all cited in the following answer, along with solutions: commandButton/commandLink/ajax action/listener method not invoked or input value not updated.
However, in your particular case, you seem rather to be interested in plain GET requests instead of POST requests, as all you want is simple page-to-page navigation. In that case, you need a <h:link> or <h:button> instead:
<h:link outcome="login" value="Login" />
<h:button outcome="login" value="Move to login.xhtml" />
(I have no idea what you're trying to do with both #{showElementBean.showElement()} and Login as command link value, so I omitted the former)
See also:
When should I use h:outputLink instead of h:commandLink?
Refer this info: JSF HTML Tags
h:commandButton
The commandButton tag renders an HTML submit button that can be
associated with a backing bean or ActionListener class for event
handling purposes. The display value of the button can also be
obtained from a message bundle to support internationalization (I18N).
Example
<h:commandButton id="button1" value="#{bundle.checkoutLabel}" action="#{shoppingCartBean.checkout}" />
HTML Output
<input id="form:button1" name="form:button1" type="submit" value="Check Out" onclick="someEvent();" />
h:commandLink
The commandLink tag renders an HTML anchor tag that behaves like a
form submit button and that can be associated with a backing bean or
ActionListener class for event handling purposes. The display value of
the link can also be obtained from a message bundle to support
internationalization (I18N).
Example
<h:commandLink id="link1" value="#{bundle.checkoutLabel}" action="#{shoppingCartBean.checkout}" />
HTML Output
Check Out
Noticed that backing bean method is not called if the form is for file upload:
<h:form name="searchForm" enctype="multipart/form-data" method="post" action="/search">
I also faced with that issue and adding the
<h:form><h:commandLink></h:commandLink> </h:form>
solved my problem.
Simple question (using JSF 2.0 and primefaces 2.2.1):
I need to create a button or link that will take me to an external url (i.e. www.facebook.com) and I need that button to look like the facebook icon instead of having the literal word. How can I do this? Thank you.
You basically want to end up with the following in the JSF-generated HTML code:
<a><img /></a>
There are several ways how to achieve this in JSF.
Just do it:
<a href="http://www.facebook.com">
<img src="#{request.contextPath}/resources/images/facebook.png" />
</a>
Use <h:graphicImage>:
<a href="http://www.facebook.com">
<h:graphicImage name="images/facebook.png" />
</a>
Eventually, with <h:outputLink>:
<h:outputLink value="http://www.facebook.com">
<h:graphicImage name="images/facebook.png" />
</h:outputLink>
What way to choose depends on whether you really need it to be a JSF component. E.g. in order to be able to grab/manupulate it in backing bean, and/or to re-render by ajax, etc.