passing input text's value to server side on click of a button in JSF

Question

I have a text box which takes a search value, and i want to send this string to the server side on click of a button. Not by a form submit, by an ajax call.

I had added an actionListener to the input tag itself, which is called on blur. But what i really want is for the user to click the button to trigger the search function.

I got an idea from this question, and implemented it this way:

<h:inputText id="likeMaterial" value="#{createBookingForm.searchText}"></h:inputText>
<a4j:jsFunction name="setParameterAndRerender" actionListener="{bean.searchMaterials}" reRender="searchResult">
    <a4j:actionparam name="param1" assignTo="#{createBookingForm.searchText}"/> 
</a4j:jsFunction> 
<h:commandButton value="Search" onclick="setParameterAndRerender('mySearchText');return false;"></h:commandButton>

The value received at server side is of course, "mySearchText". How do i pass what the user enters? Or how do i bind #{createBookingForm.searchText} before the button's action listener is called?

Im open to any other approach to. I have limitations though : Im working on enhancing a legacy application, built using JSF 1.1. I cant upgrade, not without a fight at least!

Edit : I tried doing it this way, but i get "undefined" on the server side.

Answer 1

Why not use a4j:commandButton instead of h:commandButton? It will execute ajax request and render what you want. No form submit will happen. Loks like what you need.

Answer 2

h:commandButton by default submit the form when clicked. So no need to send specially using a4j:jsFunction or in any other way. You can completely remove your js function unless if you have something else to do. If you want to test that add an action method and print the value of searchText variale in createBookingForm bean.

Hope this helps!!

Answer 3

This is the whole solution

<h:inputText id="likeMaterial" value="#{createBookingForm.searchText}"></h:inputText>
<a4j:commandButton reRender="searchResult" actionListener="#{createBookingForm.searchMaterials}">
    <a4j:actionparam name="param1" noEscape="true" value="document.getElementById('likeMaterial').value" assignTo="#{createBookingForm.searchText}" />
</a4j:commandButton>