1. Paul Statham Avatar Paul Statham
  2. Untitled project
  3. Oracle JSF Expert 1Z0-896

Wiki

Clone wiki

Oracle JSF Expert 1Z0-896 / Implement asynchronous events using AJAX

View History

Implement asynchronous events using AJAX

f:ajax simple example using keyup event

Renders the 'echo' output text on each keyup event 

<h:inputText value="#{mybean.value}">
    <f:ajax event="keyup" render="echo" />
</h:inputText>
<h:outputText id="echo" value=#"{mybean.value}" />

f:ajax attributes

  • disabled
  • event specifies the event that triggers the AJAX request
  • execute list of space separated components to execute on the server during the AJAX call. Valid keywords are @this, @form, @all, @none. If not specified @this is used as the default.
  • immediate
  • onerror javascript function to call in the event of the AJAX call resulting in an error
  • onevent javascript function that is called 3 times during lifetime of successful AJAX call: begin, complete, success
  • listener invokes this listeners processAjaxBehavior method
  • render list of space separated components to render on the client after the ajax call returns from the server. Keywords are: @this, @form, @all, @none. @none is the default if not specified

Ajax groups

Default ajax events (command buttons and links: action, inputs and select components: valueChange)

Makes a AJAX request when a input value changes or the button is clicked 

<f:ajax>
    <h:form>
        <h:panelGrid columns="2">
            ...
            <h:inputText id="name" value="#{user.name}"/>
            ...
            <h:inputText id="password" value="#{user.password}"/>
            ...
            <h:commandButton value="Submit" action="#{user.login}"/>
        </h:panelGrid>
    </h:form>
</f:ajax>

Specify AJAX request on click event

<f:ajax event="click">
    <h:form>
        <h:panelGrid columns="2">
            ...
            <h:inputText id="name" value="#{user.name}"/>
            ...
            <h:inputText id="password" value="#{user.password}"/>
            ...
            <h:commandButton value="Submit" action="#{user.login}"/>
        </h:panelGrid>
    </h:form>
</f:ajax>

Additive AJAX request, fires when button is clicked or mouse hovers over it

<f:ajax event="click">
    <h:form>
        <h:panelGrid columns="2">
            ...
            <h:inputText id="name" value="#{user.name}"/>
            ...
            <h:inputText id="password" value="#{user.password}"/>
            ...
            <h:commandButton value="Submit" action="#{user.login}">
                <f:ajax event="mouseover"/>
            </h:commandButton>
        </h:panelGrid>
    </h:form>
</f:ajax>

Implementing AjaxBehaviorEvent method for listener attibute

@Named
public class MyBean {

    public void processAjaxBehavior(AjaxBehaviorEvent event) {
        // Do something
    }

}

<h:inputText value="#{mybean.value}">
    <f:ajax event="keyup" render="echo" listener="#{myBean.listener}" />
</h:inputText>
<h:outputText id="echo" value=#"{mybean.value}" />

Updated