dcsimg
April 8, 2020
Hot Topics:

Implementing AJAX Components in the JWL Framework

  • 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>




Page 2 of 6



This article was originally published on April 17, 2008

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.


Thanks for your registration, follow us on our social networks to keep up-to-date