CommandButton action: use value of inputText as parameter in dynamic URL

Question

I need to make a small form where user types a number into the inputField, and clicks on a button, then is sent to a page, using that number as a parameter to the page.

So far I got into this:

<p:inputText id="myText" style="width:75px;" />
<p:commandButton id="myButton" value="Ir" 
    action="/site/page.xhtml?id=${param['form:myButton']}"
    title="Ir" ajax="false" proces="@this,myText" />

tried with ${param['form:myButton']} and #{param['form:myButton']}, error is the same.

Problem is, JSF thinks its a method expression...

GRAVE: Servlet.service() for servlet [Faces Servlet] in context with path [/intranet] threw exception [/myPage action="/site/page.xhtml?id=${param['form:myButton']}".xhtml @95,41  action="/site/page.xhtml?id=${param['form:myButton']}" Not a Valid Method Expression:  action="/site/page.xhtml?id=${param['form:myButton']}" with root cause
javax.el.ELException: Not a Valid Method Expression:  action="/site/page.xhtml?id=${param['form:myButton']}"
at org.apache.el.lang.ExpressionBuilder.createMethodExpression(ExpressionBuilder.java:236)
at org.apache.el.ExpressionFactoryImpl.createMethodExpression(ExpressionFactoryImpl.java:55)
at org.jboss.weld.util.el.ForwardingExpressionFactory.createMethodExpression(ForwardingExpressionFactory.java:43)
at org.jboss.weld.el.WeldExpressionFactory.createMethodExpression(WeldExpressionFactory.java:64)
at com.sun.faces.facelets.tag.TagAttributeImpl.getMethodExpression(TagAttributeImpl.java:222)
at com.sun.faces.facelets.tag.jsf.ActionSourceRule$ActionMapper2.applyMetadata(ActionSourceRule.java:104)
at com.sun.faces.facelets.tag.MetadataImpl.applyMetadata(MetadataImpl.java:81)
at javax.faces.view.facelets.MetaTagHandler.setAttributes(MetaTagHandler.java:129)
at javax.faces.view.facelets.DelegatingMetaTagHandler.setAttributes(DelegatingMetaTagHandler.java:102)
at com.sun.faces.facelets.tag.jsf.ComponentTagHandlerDelegateImpl.doNewComponentActions(ComponentTagHandlerDelegateImpl.java:402)

and this is the bottom-most exception trace.

Question: how can I pass the value typed into of the input-field into the action of the Button when the button is clicked, so the browser navigates to the desired page passing the value in the input as a parameter, without resorting to a backing bean.

I don't need to communicate with the server, just forward the page.

any solution using jQuery or plain javascript in tandem with JSF is acceptable too.

using mojarra, primefaces 3.3.1

You are doing it wrong. action expects a java Method as an EL. for eg: #{bean.someMethod}. Where 'bean' is a JSF ManagedBean. To pass value use #{bean.someMethod(someValue)}. See more here: http://balusc.blogspot.in/2011/09/communication-in-jsf-20.html — Johny T Koshy, Feb 26 '13 at 16:16
``'s action can have a string instead of a Java Method. it sends you to a page when you click the button. I do not want a method expression. — Mindwin Remember Monica, Feb 26 '13 at 16:51
The concrete functional requirement is unclear. Do you want do perform a GET form submit or do you want to perform a POST form submit and then a redirect to the desired GET URL? — BalusC, Feb 26 '13 at 17:01
also, the solution using a backing bean, binding the input to a POJO property and `faces-redirect=true` is know, but I need to do it without using a backing bean. JSF, jQuery is fine, but no Java classes can be created or modified. — Mindwin Remember Monica, Feb 26 '13 at 17:04
@BalusC: use-case: form has input field and button. user types value into input. User clicks on button. user navigates to another page, passing the value in input as a parameter to the new page. Any strategy that achieves this outcome in JSF without using Java classes is acceptable. — Mindwin Remember Monica, Feb 26 '13 at 17:06
@BalusC probably yes, but I already worked out a solution binding a javascript function to the onclick of the button. maybe not the best, but it works. — Mindwin Remember Monica, Feb 26 '13 at 17:25
Your clumsy JS workaround wherein you completely aborts the POST request and manually composes the GET target URL confirms that you essentially want a GET form. Check bottom of http://stackoverflow.com/questions/6377798/what-can-fmetadata-and-fviewparam-be-used-for/6377957#6377957 for a fully cross browser and URL-safe JS-free solution. — BalusC, Feb 26 '13 at 17:31

score 2 · Answer 1 · answered Feb 26 '13 at 16:17

2

use <f:param> It's explained in this article from BalusC http://balusc.blogspot.in/2011/09/communication-in-jsf-20.html#ProcessingGETRequestParameters

answered Feb 26 '13 at 16:17

that section explains how to use GET parameters from the request that is generating the view into that view. I want the opposite, getting the value of a page element and pumping it into a new request. – Mindwin Remember Monica Feb 26 '13 at 17:01
The `` serves an entirely different purpose. The OP essentially want a GET form. – BalusC Feb 26 '13 at 17:38
Not even a GET form. There is no need to communicate with the server in this case, just do the action and forward the user to the next page. Anyway, communication with the server will be done when the user lands from the previous page, but for the navigation, just plain javascript or jQuery is enough – Mindwin Remember Monica Aug 28 '13 at 19:24

score 0 · Accepted Answer · edited Dec 17 '15 at 16:14

I do not need a bazooka to kill a mouse. The answer is very simple.

bind a javascript function to the onclick of the button, and in that function, retrieve the value of the input field by its id, then assemble URL with the parameters and navigate away from within the javascript function.

JSF code (assume they are inside a form with myForm as its id):

<p:inputText id="myInput" style="width:75px;" />
<p:commandButton id="myButton" value="Ir" onclick="navega();" title="Ir" ajax="false" proces="@none" />

Javascript script, declared on a separate file or later on in the xhtml document:

function navega() {
     var submittedInputValue = $('#myForm\\:myInput').val();
     window.location.href = "/site/mypage.xhtml?param1=whatever&amp;id=" + submittedInputValue ;
                }

Take note of the prepend id (myForm:myInput), of using \\ to escape the : in jQuery, and using & instead of & in the xhtml so its not treated as an entity.

Note: probably not all of those commandButton attributes are required, feel free to edit this answer and remove the useless ones.

EDIT: removed the submit and changed process to @none on the command button.

CommandButton action: use value of inputText as parameter in dynamic URL

2 Answers2