Implementing AJAX Components in the JWL Framework
- Select the Panel Group and click Properties → AJAX. Click "Allow Ajax Updates" and set the Ajax request to "Refresh".
- Click the <hx:ajaxRefreshRequest> tag that was added in the Step 7 and add a parameter to be sent from the browser. The parameter is the input field that you added in Step 4: "text1".
- Drag and drop a Button Command and add a new behavior that will have "group1" target action and be invoked upon a mouse click.
- Run this JPS page on the server (make sure you are running under Websphere 6.1 or higher).
- When the page loads, enter a value into the input field and click the button. You will observe that the value that you had entered has appeared next to the button.
Figure 7: AjaxRefreshRequest Example Output
Listing 3 is the full source code of what you have just gone through. You can find full source code as an attachment at the end of this article.
Click here for a larger image.
Figure 4: AJAX Properties
Click here for a larger image.
Figure 5: AjaxRefreshRequest Properties
Listing 2: Submit Button "Behavior" Source Code
<hx:behavior event="onclick"
behaviorAction="get"
targetAction="group1" />
Click here for a larger image.
Figure 6: Running the Example on Websphere 6.1 Server
Listing 3: AjaxRefreshRequest Example—Full Source Code
<f:view> <body> <hx:scriptCollector id="scriptCollector1"> <h:form id="form1" styleClass="form"> <h:inputText id="text1" styleClass="inputText"> </h:inputText> <hx:commandExButton type="submit" value="Submit" id="button1" styleClass="commandExButton"> <hx:behavior event="onclick" behaviorAction="get" targetAction="group1"> </hx:behavior> </hx:commandExButton> <h:panelGroup id="group1" styleClass="panelGroup"> <h:outputText id="text2" styleClass="outputText" value="#{param.text1}"> </h:outputText> </h:panelGroup> hx:ajaxRefreshRequest id="ajaxRefreshRequest1" target="group1" params="text1"> </hx:ajaxRefreshRequest> </h:form> </hx:scriptCollector> </body> </f:view>
Page 2 of 6
Comment and Contribute