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?
Related
I'm a beginner to JSF and I want to code a little searchbar on my future website.
I made two pages : index.xhtml and search.xhtml, and I try to pass get parameters from index.xhtml to search.xhtml, so I made this little formular :
<!-- index.xhtml -->
<h:form id="Form_search">
<h:inputText class="search_bar_text" binding="#{se}"></h:inputText>
<h:button class="search_bar_button" outcome="search">
<f:param name="search" value="#{se.value}" />
</h:button>
</h:form>
To summarize, I want to send the content of an inputText to search.xhtml
But there's a problem : when I click on the submit button, no parameters are passed, so instead of having /search.xhtml?search=foobar I only have /search.xhtml.
I also tried this, but this doesn't work either :
<!-- index.xhtml -->
<h:form id="Form_search">
<h:inputText class="search_bar_text" binding="#{se}"></h:inputText>
<h:button class="search_bar_button" outcome="search.xhtml?search=#{se.value}">
</h:button>
</h:form>
Can someone explain to me the reason of this problem and how I can fix it?
The <f:param value> and <h:button outcome> are evaluated during rendering the HTML output, not during "submitting" of the form as you seem to expect. Do note that there's actually no means of a form submit here. If you're capable of reading HTML code, you should see it in the JSF-generated HTML output which you can see via rightclick, View Source in webbrowser.
Fix it to be a true GET form. You don't need a <h:form>, <h:inputText>, nor <h:button> here at all. You don't want a POST form. You don't seem to want to bind the input to a bean property. You don't want a plain navigation button.
<form id="form_search" action="search.xhtml">
<input name="search" class="search_bar_text" />
<input type="submit" class="search_bar_button" />
</form>
Yes, you can just use plain HTML in JSF.
If you really, really need to use JSF components for this purpose for some reason, then you could also use this POST-redirect-GET-with-view-params trick.
First add this to both index.xhtml and search.xhtml:
<f:metadata>
<f:viewParam name="search" value="#{bean.search}" />
</f:metadata>
Then use this form:
<h:form id="form_search">
<h:inputText value="#{bean.search}" styleClass="search_bar_text" />
<h:commandButton styleClass="search_bar_button" action="search?faces-redirect=true&includeViewParams=true" />
</h:form>
This would perhaps make sense if you intend to use JSF validation on it. But even then, this doesn't prevent endusers from manually opening the URL with invalid params. You'd then better add validation to <f:viewParam> itself on search.xhtml.
See also:
What can <f:metadata>, <f:viewParam> and <f:viewAction> be used for? (scroll to bottom of answer)
How do I process GET query string URL parameters in backing bean on page load?
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" />
I have a commandbutton that I want to use to navigate to another jsf facelet, but I am getting a not a valid method expression:
<h:commandButton value="Save Edits" action="editOrDeletePage.xhtml?editing=true;#{product.id};name=#{product.productName};description=#{product.description};quantity=#{product.quantity}"/>
I can get it to work if I only have
action="editOrDeletePage.xhtml?editing=true"
I guess when I have multiple properties that I'm passing, I am not delimiting them correctly. Any ideas?
When the action attribute contains an EL expression, it's interpreted as a method expression. It's thus really only valid when you use action="#{bean.someMethod}". However, your attempt does not represent a valid method expression, it's represents instead a value expression which is not accepted by the action attribute.
If you intend to append additional request/view parameters to the form submit, then you should rather use <f:param>.
<h:commandButton value="Save Edits" action="editOrDeletePage.xhtml">
<f:param name="editing" value="true" />
<f:param name="id" value="#{product.id}" />
<f:param name="name" value="#{product.productName}" />
<f:param name="description" value="#{product.description}" />
<f:param name="quantity" value="#{product.quantity}" />
</h:commandButton>
Note that those parameters don't end up in the request URL (as you see in the browser address bar) and that your theoretical approach also wouldn't have done that, a JSF command button namely generates a HTML <input type="submit"> element which submits to the very same URL as specified in the action attribute of the parent HTML <form method="post">.
Also note that those parameters are not evaluated during the form submit, but during displaying the form. If you intented to pass submitted values along that way, then you're basically doing it wrong. Perhaps you want to specify them as view parameters so that you can use action="editOrDeletePage?faces-redirect=true&includeViewParams=true" as action.
After all, it's hard to propose the right solution for you as you didn't elaborate the concrete functional requirement in detail at all.
If you are using JSF2 you can use h:button for this
<h:button value="press here" outcome="editOrDeletePage">
<f:param name="productId" value="#{product.id}" />
</h:button>
I want to create command button in JSF page. When I press it I want to open a new page and send a value using using the http. I tested this h:commnadButton but it's not working.
<h:commandButton id="lnkHidden" value=" Edit User " action="EditAccountProfile.jsf">
<f:param name="id" value="#{item.userid}" />
</h:commandButton>
h:commandButton is for submitting forms, usually executing actions in the server.
Use h:button for simple navigation:
<h:button id="lnkHidden" value=" Edit User " outcome="EditAccountProfile.jsf">
<f:param name="id" value="#{item.userid}" />
</h:button>
This will generate a normal HTML <input type="button" onclick="window.location.href=/correct/path/to/EditAccountProfile.jsf" />, no HTTP POST needed.
See also:
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.