	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Bangla
	Bosnian
	Czech
	Greek
	Estonian
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Icelandic
	Croatian
	Japanese
	Hungarian
	Hebrew
	Georgian
	Central Kurdish
	Khmer
	Kyrgyz
	Kazakh
	Lithuanian
	Latvian
	Malay
	Norwegian
	Polish
	Romanian
	Russian
	Slovak
	Slovenian
	Serbian
	Serbian
	Swedish
	Thai
	Turkish
	Ukrainian
	Uzbek
	Vietnamese
	Chinese
	Chinese

Ajax Framework

Enhanced user experience with the powerful and easy to use Ajax Framework.

Ajax Tag Documentation

AjaxBehavior is an extension to standard f:ajax.

Name	Type	Required	Default	Description
async	boolean	false	false	When set to true, ajax requests are not queued.
delay	String	false		If less than delay milliseconds elapses between calls to request() only the most recent one is sent and all other requests are discarded. If this option is not specified, or if the value of delay is the literal string 'none' without the quotes, no delay is used.
disabled	boolean	false	false	Disables ajax behavior.
event	String	false		A String identifying the type of event the Ajax action will apply to. If specified, it must be one of the events supported by the component the Ajax behavior is being applied to. For HTML components this would be the set of supported DOM events for the component, plus "action" for Faces ActionSource components and "valueChange" for Faces EditableValueHolder components. If not specified, the default event is determined for the component. The DOM event name is the actual DOM event name (for example: "click") as opposed to (for example: "onclick").
form	String	false	The enclosing form	Form to serialize for an ajax request.
global	boolean	false	true	Global ajax requests are listened by ajaxStatus component, setting global to false will not trigger ajaxStatus.
ignoreAutoUpdate	boolean	false	false	If true, components which autoUpdate="true" will not be updated for this request. If not specified, or the value is false, no such indication is made.
ignoreComponentNotFound	boolean	false	false	If true, unresolvable components (ComponentNotFoundException) referenced in the update/process attribute are ignored.
immediate	boolean	false	false	Boolean value that determines the phaseId, when true actions are processed at apply_request_values, when false at invoke_application phase.
listener	MethodExpression	false		Method to process in partial request.
oncomplete	String	false		Client-side javascript callback to execute when ajax request is completed.
onerror	String	false		Client-side javascript callback to execute when ajax request fails.
onstart	String	false		Client-side javascript callback to execute before ajax request begins.
onsuccess	String	false		Client-side javascript callback to execute when ajax request succeeds.
partialSubmit	boolean	false	false	Enables serialization of values belonging to the partially processed components only.
partialSubmitFilter	String	false		Selector to use when partial submit is on, default is ":input" to select all descendant inputs of a partially processed components.
process	String	false		Component(s) to process in partial request.
resetValues	boolean	false	false	If true, local values of input components to be updated within the ajax request would be reset.
skipChildren	boolean	false	true	Containers components like, datatable, panel, tabview skip their children if the request owner is them. For example, sort, page event of a datatable. As children are skipped, input values get lost, assume a case with a datatable and inputs components in a column. Sorting the column discards the changes and data is sorted according to original value. Setting skipChildren to false, enabled input values to update the value and sorting to be happened with user values.
timeout	int	false	0	Timeout in milliseconds for ajax request, whereas 0 means no timeout.
update	String	false		Component(s) to update with ajax.

Name	Library	Target
jquery/jquery.js	primefaces
core.js	primefaces

Behavior Id org.primefaces.component.AjaxBehavior

Behavior Class org.primefaces.behavior.ajax.AjaxBehavior

Handler Class org.primefaces.behavior.ajax.AjaxBehaviorHandler

RESOURCES

Tag Documentation Documentation Documentation JSDoc

ON THIS PAGE

Introduction Process PartialSubmit Selector Search Validation RemoteCommand Observer Callback Poll Fragment Status Lifecycle Dropdown


<div class="card">
    <h:form>
        <h5 class="mt-0">Basic</h5>
        <div class="formgrid grid p-fluid">
            <div class="field col-12 md:col-6">
                <p:outputLabel for="name" value="Name"/>
                <p:inputText id="name" value="#{basicView.text1}"/>
                <small>Value: <h:outputText id="display" value="#{basicView.text1}"/></small>
            </div>
        </div>
        <p:commandButton value="Submit" update="display"/>
    </h:form>
</div>

<div class="card">
    <h:form>
        <h5 class="mt-0">Action Listener</h5>
        <p class="mt-0">Counter: <h:outputText id="output" value="#{basicView.number}"/></p>

        <p:commandButton value="Increment" action="#{basicView.increment}" update="output"/>
    </h:form>
</div>

<div class="card">
    <h:form>
        <h5 class="mt-0">Events</h5>
        <div class="formgrid grid p-fluid">
            <div class="field col-12 md:col-4">
                <p:outputLabel for="@next" value="KeyUp"/>
                <p:inputText id="firstname" value="#{basicView.text2}">
                    <p:ajax event="keyup" update="display2" process="@this"/>
                </p:inputText>
                <small>Value: <h:outputText id="display2" value="#{basicView.text2}"/></small>
            </div>
            <div class="field col-12 md:col-4">
                <p:outputLabel for="@next" value="Blur"/>
                <p:inputText id="middlename" value="#{basicView.text3}">
                    <p:ajax event="blur" update="display3"/>
                </p:inputText>
                <small>Value: <h:outputText id="display3" value="#{basicView.text3}"/></small>
            </div>
            <div class="field col-12 md:col-4">
                <p:outputLabel for="@next" value="Input"/>
                <p:inputText id="lastname" value="#{basicView.text4}">
                    <p:ajax event="input" update="display4"/>
                </p:inputText>
                <small>Value: <h:outputText id="display4" value="#{basicView.text4}"/></small>
            </div>
        </div>

        <h5>Listener</h5>
        <div class="formgrid grid p-fluid">
            <div class="field col-12 md:col-4">
                <p:outputLabel for="@next" value="Keyup"/>
                <p:inputText id="counter" value="#{basicView.text5}">
                    <p:ajax event="keyup" update="display5" listener="#{basicView.handleKeyEvent}"/>
                </p:inputText>
                <small>Value: <h:outputText id="display5" value="#{basicView.text5}"/></small>
            </div>
        </div>
    </h:form>
</div>

<div class="card">
    <h:form>
        <h5 class="mt-0">Advanced</h5>
        <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true"/>

        <div class="formgrid grid p-fluid">
            <div class="field col-12 md:col-6">
                <p:outputLabel for="country" value="Country"/>
                <p:selectOneMenu id="country" value="#{basicView.country}">
                    <p:ajax listener="#{basicView.onCountryChange}" update="city"/>
                    <f:selectItem itemLabel="Select Country" itemValue="" noSelectionOption="true"/>
                    <f:selectItems value="#{basicView.countries}"/>
                </p:selectOneMenu>
            </div>
            <div class="field col-12 md:col-6">
                <p:outputLabel for="city" value="City"/>
                <p:selectOneMenu id="city" value="#{basicView.city}">
                    <f:selectItem itemLabel="Select City" itemValue="" noSelectionOption="true"/>
                    <f:selectItems value="#{basicView.cities}"/>
                </p:selectOneMenu>
            </div>
        </div>

        <p:commandButton value="Submit" update="msgs" action="#{basicView.displayLocation}" icon="pi pi-check"/>
    </h:form>
</div>


package org.primefaces.showcase.view.ajax;

import java.io.Serializable;
import java.util.HashMap;
import java.util.Map;

import jakarta.annotation.PostConstruct;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;

@Named
@ViewScoped
public class BasicView implements Serializable {

    private String text1;
    private String text2;
    private String text3;
    private String text4;
    private String text5;
    private int number;
    private Map<String, Map<String, String>> data = new HashMap<>();
    private String country;
    private String city;
    private Map<String, String> countries;
    private Map<String, String> cities;

    @PostConstruct
    public void init() {
        countries = new HashMap<>();
        countries.put("USA", "USA");
        countries.put("Germany", "Germany");
        countries.put("Brazil", "Brazil");

        Map<String, String> map = new HashMap<>();
        map.put("New York", "New York");
        map.put("San Francisco", "San Francisco");
        map.put("Denver", "Denver");
        data.put("USA", map);

        map = new HashMap<>();
        map.put("Berlin", "Berlin");
        map.put("Munich", "Munich");
        map.put("Frankfurt", "Frankfurt");
        data.put("Germany", map);

        map = new HashMap<>();
        map.put("Sao Paulo", "Sao Paulo");
        map.put("Rio de Janerio", "Rio de Janerio");
        map.put("Salvador", "Salvador");
        data.put("Brazil", map);
    }

    public void increment() {
        number++;
    }

    public void handleKeyEvent() {
        if (text5 != null) {
            text5 = text5.toUpperCase();
        }
    }

    public String getText1() {
        return text1;
    }

    public void setText1(String text1) {
        this.text1 = text1;
    }

    public String getText2() {
        return text2;
    }

    public void setText2(String text2) {
        this.text2 = text2;
    }

    public String getText3() {
        return text3;
    }

    public void setText3(String text3) {
        this.text3 = text3;
    }

    public String getText4() {
        return text4;
    }

    public void setText4(String text4) {
        this.text4 = text4;
    }

    public String getText5() {
        return text5;
    }

    public void setText5(String text5) {
        this.text5 = text5;
    }

    public int getNumber() {
        return number;
    }

    public Map<String, Map<String, String>> getData() {
        return data;
    }

    public String getCountry() {
        return country;
    }

    public void setCountry(String country) {
        this.country = country;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public Map<String, String> getCountries() {
        return countries;
    }

    public Map<String, String> getCities() {
        return cities;
    }

    public void onCountryChange() {
        if (country != null && !"".equals(country)) {
            cities = data.get(country);
        }
        else {
            cities = new HashMap<>();
        }
    }

    public void displayLocation() {
        FacesMessage msg;
        if (city != null && country != null) {
            msg = new FacesMessage("Selected", city + " of " + country);
        }
        else {
            msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Invalid", "City is not selected.");
        }

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
}

Ajax Framework

Ajax Tag Documentation

Basic

Action Listener

Events

Listener

Advanced

Usage

Reloading page