Adding Ajax support to JSF components

Ajax enables you to overcome the page loading limitations of traditional HTML/HTTP Web pages. The ideas behind Ajax are simple: listen for an event in the browser, send a background request to the server, and update part of the page when server responds.
Prerequisites:
  1. Create a dynamic Web project that is enabled for Faces technology by following the instructions in Developing Faces (JSF) applications.
  2. Create a Faces JSP file.
Ajax support can be added to the following panel components.
  • <hx:panelActionbar>
  • <hx:panelBox>
  • <hx:panelDialog>
  • <hx:panelFormBox>
  • <h:panelGrid>
  • <h:panelGroup>
  • <hx:panelLayout>
  • <hx:panelMenu>
  • <hx:panelSection>

Panel components organize and contain collections of other components. For more information on panel components, refer to Panel components.

To add Ajax support to a JSF page:

  1. Drag a panel component from the palette onto the JSP.
  2. Drag additional components (for example an input component) from the palette onto the panel component.
  3. In the properties view, select the panel component tag. Select the Ajax tab.
  4. On the Ajax tab, select the Allow Ajax updates checkbox.
  5. Select the type of Ajax request that you want to use:
    • Refresh - A GET request for the same page.
    • Submit - A POST request for the same page.
    • External - A GET request for a different page.
  6. Configure the request parameters.
    • If you selected the Submit request, the contents of the form containing the panel is submitted to the server. Use the Target field to specify where the additional content is defined. The Target field identifies the panel that will be updated.
    • If you selected a Refresh request, you can pass the values of specific input fields on the page to the server. To configure Refresh request parameters:
      1. Click Click to edit Ajax request properties. The hx:ajaxRefreshRequest tab opens.
      2. In the Parameter values sent from the browser field, click Add Parameter to retrieve parameters from input fields in the browser display. Select the JSF component from which you want the value retrieved when the update request is made. The name of the parameters is the ID of the JSF component. Parameters can be used in the re-rendering of the target component, for example param.searchString.
      3. In the Parameter values calculated on the server field, click Add Parameter to add the parameters that are calculated on the server and sent to the browser to be sent back as part of the Ajax update request.
    • If you selected an External request, you can pass the values of specific input fields on the page to the server. To configure External request parameters:
      1. Click Click to edit Ajax request properties. The hx:ajaxExternalRequest tab opens.
      2. In the Parameter values sent from the browser field, click Add Parameter to retrieve parameters from input fields in the browser display. Select the JSF component from which you want the value retrieved when the update request is made. The name of the parameters is the ID of the JSF component. Parameters can be used in the re-rendering of the target component (for example param.searchString).
      3. In the Parameter values calculated on the server field, click Add Parameter to add the parameters that are calculated on the server and sent to the browser to be sent back as part of the Ajax update request.
      4. The URL of the JSP responds to the request. When a JWL GET action is issued, the new content for the panel associated with the component is retrieved using the specified URL.
      5. Source is the ID of a tag in the targeted URL whose content will replace the content of the container this component is associated with. If not specified or if the id is not found in the page referenced by the URL, the id of the Target container is used. If this id is not found in the page referenced by the URL, the body content is used.
    Important: If the component, whose value you want to use as a parameter is contained by a data table, you must manually add $$AJAXROW$$<component client id> to the parameter set. Where <component client id> is a client ID of the component whose value you want to send as the parameter. For example,
    		
    <h:form id="form1" styleClass="form">
         <hx:dataTableEx border="0" cellpadding="2" cellspacing="0" 
            columnClasses="columnClass1" headerClass="headerClass" 
            footerClass="footerClass" rowClasses="rowClass1, rowClass2" 
            id="tableEx1" styleClass="dataTableEx" value="#{company.employeeList}" 
            var="varEmployee">
              <hx:columnEx id="columnEx1">
                   <f:facet name="header">
                        <h:outputText id="text1" styleClass="outputText" value="Id">
                        </h:outputText>
                   </f:facet>
                   <h:outputLink id="link1">
                        <h:outputText id="text2" styleClass="outputText" 
                           value="#{varEmployee.name}">
                        </h:outputText>
                        <hx:behavior event="onclick" behaviorAction="get;stop" 
                           targetAction="detailsBox"/>
                   </h:outputLink>
                   <h:inputHidden id="empId" value="#{varEmployee.Id}"/>
              </hx:columnEx>
         </hx:dataTableEx>
         <hx:panelBox id="detailsBox" styleClass="panelBox">
              <h:outputText id="text2" styleClass="putText" 
                 value="#{company.employeeList[param.empId].department}">
              </h:outputText>
         </hx:panelBox>
         <hx:ajaxRefreshRequest id="ajaxExternalRequest1" target="detailsBox"  params="$$AJAXROW$$form1:tableEx1:empId" >
         </hx:ajaxRefreshRequest>
    </h:form>
    

    The parameter set is a list of IDs separated by semicolons. The value of these components are retrieved and appended as params to the URL used to get the new content. The name of the param is the ID of the component.

For more information on using Ajax with JSF components, refer to the developerWorks article JSF and Ajax: Web 2.0 application made easy with Rational Application Developer V7.

Feedback