Adding Ajax components to a JSF page

Adding Ajax components to a JSF page

JSF Widget Library (JWL) AJAX Components are used to dynamically replace the content of a panel tag within a page without replacing the page in the browser window. These tags allow a more seamless, flicker-free user interface. User interactions with a page no longer need to submit/request entire pages, instead, pieces of the page can change as data is entered.

Create a JSF enabled dynamic Web project.

Create a JSF page.

Add a panel component to the JSF page.

Ajax tags are added, as child tags, to the panel tags. The Ajax tags define alternative content for the panel. When a predefined JavaScript™ event is invoked, an Ajax request is made to the server for new panel content. The server returns the content to the client where it updates the panel with the new content.
The method by which Ajax components are added to a page varies based on the component:
Table 1. Ajax request components
Ajax request component¹ Tag Description How is component added to a page?
Refresh <hx:ajaxRefreshRequest> Get Content - Define how content from the same JSF page replaces the existing content of the parent tag. Content is retrieved using an HTTP get sub-request. The HTTP get sub-request passes parameters from the client to the server to control what content is generated and how it is generated.

Right-click the panel component that you added to the page and select
Properties.

Click the
Ajax tab in the Properties view.

Click
Allow Ajax updates.

Select
Refresh.

Click
Click to edit Ajax request properties to define the following properties:

Target - Use the Target field to specify where the additional content is defined.

Parameter values sent from the browser - When making an Ajax update request, parameters are sent as part of the URL. Use the Parameter values sent from the browser to retrieve parameters from input fields in the browser display.

Parameter values calculated on the server - These are parameters that are calculated on the server and sent to the browser to be sent back as part of the Ajax update request.

Submit <hx:ajaxRefreshSubmit> Update Content - Define how content from the same JSF page replaces the existing content of the parent tag. Content is retrieved using an HTTP submit sub-request. The HTTP submit sub-request, sends a form enclosing the panel component, and receives the panel with the content results of the request.

Right-click the panel component that you added to the page and select
Properties.

Click the
Ajax tab in the Properties view.

Click
Allow Ajax updates.

Select
Submit.

Click
Click to edit Ajax request properties to define the target property. Use the Target field to specify where the additional content is defined.

External <hx:ajaxExternalRequest> Get External Content - Define how content from a different page replaces the content of the parent tag. Content is retrieved using an HTTP get sub-request against an arbitrary data source. The HTTP get sub-request can also request content from a source other than the originating JSF page.

Right-click the panel component that you added to the page and select
Properties.

Click the
Ajax tab in the Properties view.

Click
Allow Ajax updates.

Select
External.

Click
Click to edit Ajax request properties to define the following properties:

Target - Use the Target field to specify where the additional content is defined.

Parameter values sent from the browser - When making an Ajax update request, parameters are sent as part of the URL. Use the Parameter values sent from the browser to retrieve parameters from input fields in the browser display.

Parameter values calculated on the server - These are parameters that are calculated on the server and sent to the browser to be sent back as part of the Ajax update request.

URL - The URL of the JSP responds to the request. When a JWL GET action is issued against this component, the new content for the panel associated with the component is retrieved using the specified URL.

Source - The Source is the ID of a tag in the targeted URL whose content will replace the existing content.

Adding only a JWL AJAX tag to the page does not do anything. In order for the page to receive new content, code at least one JWL get action into the page. The get action causes the new content, defined by the AJAX tag, to be retrieved.

Related concepts

Asynchronous JavaScript and XML (AJAX) overview
¹ Click the link to see the component properties.

Ajax request component¹	Tag	Description	How is component added to a page?
Refresh	<hx:ajaxRefreshRequest>	Get Content - Define how content from the same JSF page replaces the existing content of the parent tag. Content is retrieved using an HTTP get sub-request. The HTTP get sub-request passes parameters from the client to the server to control what content is generated and how it is generated.	Right-click the panel component that you added to the page and select Properties. Click the Ajax tab in the Properties view. Click Allow Ajax updates. Select Refresh. Click Click to edit Ajax request properties to define the following properties: Target - Use the Target field to specify where the additional content is defined. Parameter values sent from the browser - When making an Ajax update request, parameters are sent as part of the URL. Use the Parameter values sent from the browser to retrieve parameters from input fields in the browser display. Parameter values calculated on the server - These are parameters that are calculated on the server and sent to the browser to be sent back as part of the Ajax update request.
Submit	<hx:ajaxRefreshSubmit>	Update Content - Define how content from the same JSF page replaces the existing content of the parent tag. Content is retrieved using an HTTP submit sub-request. The HTTP submit sub-request, sends a form enclosing the panel component, and receives the panel with the content results of the request.	Right-click the panel component that you added to the page and select Properties. Click the Ajax tab in the Properties view. Click Allow Ajax updates. Select Submit. Click Click to edit Ajax request properties to define the target property. Use the Target field to specify where the additional content is defined.
External	<hx:ajaxExternalRequest>	Get External Content - Define how content from a different page replaces the content of the parent tag. Content is retrieved using an HTTP get sub-request against an arbitrary data source. The HTTP get sub-request can also request content from a source other than the originating JSF page.	Right-click the panel component that you added to the page and select Properties. Click the Ajax tab in the Properties view. Click Allow Ajax updates. Select External. Click Click to edit Ajax request properties to define the following properties: Target - Use the Target field to specify where the additional content is defined. Parameter values sent from the browser - When making an Ajax update request, parameters are sent as part of the URL. Use the Parameter values sent from the browser to retrieve parameters from input fields in the browser display. Parameter values calculated on the server - These are parameters that are calculated on the server and sent to the browser to be sent back as part of the Ajax update request. URL - The URL of the JSP responds to the request. When a JWL GET action is issued against this component, the new content for the panel associated with the component is retrieved using the specified URL. Source - The Source is the ID of a tag in the targeted URL whose content will replace the existing content.