dcsimg
August 16, 2018
Hot Topics:

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

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


  4. Click here for a larger image.

    Figure 5: AjaxRefreshRequest Properties

  5. Drag and drop a Button Command and add a new behavior that will have "group1" target action and be invoked upon a mouse click.
  6. Listing 2: Submit Button "Behavior" Source Code

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


  8. Click here for a larger image.

    Figure 6: Running the Example on Websphere 6.1 Server

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

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

 


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

 

 


Enterprise Development Update

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

By submitting your information, you agree that developer.com may send you developer offers via email, phone and text message, as well as email offers about other products and services that developer believes may be of interest to you. developer will process your information in accordance with the Quinstreet Privacy Policy.

Sitemap

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