The submit type of AJAX request works in a way that is similar to the action that occurs when a user clicks a button on an EGL-controlled Web page: control passes to the JSF Handler and all the variables in the JSF Handler are updated to match the values of the JSF controls. Unlike a refresh request, there is no need to pass parameters because all of the variables in the JSF Handler are updated with the current values of the control. However, like a refresh request, only the controls within a JSF panel control are updated.
With this type of request, you specify an area of the page to be updated and an event to trigger 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 Properties view looks like this example:

<hx:ajaxRefreshSubmit id="ajaxRefreshSubmit1"
target="updatablePanel">
</hx:ajaxRefreshSubmit>
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