October 24, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

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.

 

 


Sitemap | Contact Us

Rocket Fuel