Implementing AJAX Components in the JWL Framework
Update Content <hx:ajaxRefreshSubmit>
<hx:ajaxRefreshSubmit> tag allows for the content of the same JSF page to be asynchronously replaced within the parent tag. The content is retrieved using HTTP POST request. This tag is used when you want to submit the whole form to the server.
The following steps describe how you can implement this tag:
- Create a new JSF page ajaxRefreshSubmitExample.jsp by clicking File → New → Other → Web → Web Page.
- Open ajaxRefreshSubmitExample.jsp in Source mode.
- In the "Palette" pane, click "Enhanced Faces Components" (make sure you are in a Web perspective).
- Drag and drop three input components from the palette to the page. This will produce the code shown in Listing 4:
- Drag and drop Panel Group component from the palette to the page.
- Drag and drop Text Output component from the palette to the panel that you added in the Step 5.
- Select the Panel Group and click Properties → AJAX. Click "Allow Ajax Updates" and set Ajax request to "Submit".
- Drag and drop a Button Command and add a new behavior that will have a "group1" target action and be invoked upon a mouse click.
Click here for a larger image.
Figure 8: Create a New JSF Page
Figure 9: The "Palette" Pane
Listing 4: Three Input Text Fields Code
<hx:scriptCollector id="scriptCollector1"> <h:form id="form1" styleClass="form"> <h:inputText id="text1" styleClass="inputText"> </h:inputText> <h:inputText id="text2" styleClass="inputText"> </h:inputText> <h:inputText id="text3" styleClass="inputText"> </h:inputText> </h:form> </hx:scriptCollector>
Click here for a larger image.
Figure 10: AJAX Properties
Listing 5: Submit Button "Behavior" Code
<hx:behavior event="onclick" behaviorAction="get" targetAction="group1" />
Page 3 of 6
This article was originally published on April 17, 2008