The refresh type of AJAX request prompts the servlet to update the values of the controls in a specified area of the page. However, the refresh request does not update the variables in the JSF Handler to match the controls on the page. In this way, this type of request is intended to be modular and efficient.
With this type of request, you specify an area of the page to be updated, an event to trigger the request, and optionally any parameters to be passed along with the request. Then, you configure the JSF Handler's onPreRenderFunction to update the specified part of the page.
AJAX requests in EGL can update only the parts of the page within a JSF panel control. JSF panel controls serve mainly as containers and organizers for other JSF controls. The Panel - Group Box control, found in the Enhanced Faces Components drawer of the Palette view, is a good control to use because it is only a container and is not visible on the page.
<h:panelGrid id="updatablePanel" styleclass="panelGrid">
<h:outputText id="textToUpdate" value="#{myPage.message}"
binding="#{myPage.message_Ref}" styleClass="outputText" />
</h:panelGrid>
Do this by adding a JSF behavior to an input control on the page and then selecting an event to trigger the request. The control containing the behavior does not need to be within the panel control, but only input controls can trigger requests.
For example, you can make the AJAX request occur when the user moves the focus into a particular control. In this case, you use the onFocus event. To perform the request when the user moves focus away from a particular control, you use the onBlur event. Other commonly used events include onClick, onMouseOver, and onSelect.
<h:inputText id="nameText" value="#{myPage.name}"
binding="#{myPage.name_Ref}" styleClass="inputText" >
<hx:behavior event="onblur" id="behavior1"
behaviorAction="get" targetAction="updatablePanel">
</hx:behavior>
</h:inputText>
The behavior might look like this example:
The parameters in the table labeled Parameter values sent from the browser refer to the value of input controls on the page. For example, if you want to pass the current value of an input control on the page as a parameter, add that input control's ID here.
The parameters in the table labeled Parameter values calculated on the server refer either to literal values you type here or to the value of variables in the JSF Handler.
<hx:ajaxRefreshRequest id="ajaxRefreshRequest1"
target="updatablePanel" params="nameText">
</hx:ajaxRefreshRequest>
In the editor, the AJAX request
might look like this example:
Because the onPreRenderFunction runs when the page first loads as well as on every AJAX request, you might want to detect which case has caused the function to run. You can do this by testing for the value of the parameter $$ajaxmode. When the function runs as the result of a normal page loading operation, this parameter has a null value; when the function runs as the result of an AJAX request, the parameter will contain a value.
function onPreRender()
if (J2EELib.getQueryParameter("$$ajaxmode") == NULL)
//The page is loading for the first time.
//Perform page loading operations here.
else
//The page is loading as the result of an AJAX request.
//Perform AJAX updating operations here.
end
end
outputText = "Hello "::J2EELib.GetQueryParameter("nameText")::"!";
For an example of an AJAX refresh request, see Updating portions of a web page with AJAX requests.