February 10, 2012
Hot Topics:
RSS RSS feed

Implementing AJAX Components in the JWL Framework

  • April 17, 2008
  • By Aleksey Shevchenko
  • Send Email »
  • More Articles »
  1. Select the Panel Group and click Properties → AJAX. Click "Allow Ajax Updates" and set the Ajax request to "Refresh".



    2. Click here for a larger image.

    Figure 4: AJAX Properties

  2. 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".



    3. Click here for a larger image.

    Figure 5: AjaxRefreshRequest Properties

  3. Drag and drop a Button Command and add a new behavior that will have "group1" target action and be invoked upon a mouse click.

    4. Listing 2: Submit Button "Behavior" Source Code

    <hx:behavior event="onclick"
             behaviorAction="get"
             targetAction="group1" />
  4. Run this JPS page on the server (make sure you are running under Websphere 6.1 or higher).



    5. Click here for a larger image.

    Figure 6: Running the Example on Websphere 6.1 Server

  5. 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.

    6. 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>



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Networking Solutions
Sitemap | Contact Us