You can use AJAX which allows you with the help of HTTPXMLObject and JavaScript to send data from the client to the server without the need to recreate the complete page.

You can use AJAX which allows you with the help of HTTPXMLObject and JavaScript to send data from the client to the server without the need to recreate the complete page.
You have to use the JSF AJAX tag "f:ajax" in a JSF component to realize this.

Example of an JSF AJAX Tag:

<f:ajax listener="#{myBean.asyncMethod}" execute="nameInputField" render="nameOutputField">

This AJAX tag is added in the tag of an component, for example: "h:commandButton". If an action is performed in a component, then this AJAX tag is called.
The function defined in the attribute "listener" is run. "execute" defines which components are added to the AJAX request. "render" defines which component are updated after the AJAX request.
The value of the input component "nameInputField" will be passed to the bean during the AJAX request. The output component "nameOutputField" will be updated after the request.

Other attributes in the JSF AJAX tag:

Event

Defines which JSF event will trigger the AJAX request. Default: action.
Example of JSF events: "keypress" "click", "change", etc.

 

Onerror

Defines the JavaScript function that is called when an error happened during the AJAX request. 

Example:

<script>
var myJavaScriptfunction = function(){alert('A change happened!')};
</script>

<f:ajax event="change" onerror="myJavaScriptfunction"/>

 

Onevent

Defines the JavaScript function that is called when an event happened during the AJAX request.
It is implemented similar like the attribute "Onerror".

 

Immediate

Defines if the generated events are run directly in the "Apply Request Values" phase before "Invoke Applications" phase (the fifth phase before the rendering.

Example:

<f:ajax event="change" immediate="true"/>

This will be run in the "Apply Request Values" phase, which is the second phase. It is the phase where the method decode() is called on every component of the page.

 

Disabled

Defines if the AJAX tag will not be run. A Boolean is passed and you can also pass a variable.

Example of an AJAX function in a button component:

<h:form>
    <h:inputText id = "nameInputField" value = "#{myBean.name}"></h:inputText>
    <h:commandButton value = "Submit Name">
       <f:ajax listener="#{myBean.displayName()}" execute = "nameInputField" render = "nameOutputMessage" />
    </h:commandButton>
    <h1>
	<h:outputText id = "nameOutputMessage"
        value = "#{myBean.ajaxOutputMessage}"/>
	</h1>
</h:form>

The AJAX tag will be run, when the button "h:commandButton" is clicked.