<apex: actionSupport> Component in Visualforce Page

The <apex:actionSupport> component is another important component that's used for adding AJAX support to another component. It allows the component to be refreshed asynchronously by the server when a particular event occurs.

Just like other components, the <apex:actionSupport> component also has the following attributes:

1. action

The action attribute is of type "ApexPages.Action" that is used for defining the action method invoked by the AJAX request to the server. The page simply refreshes when the user does not specify the action.

Syntax

2. disabled

The disabled attribute is of type Boolean, which specifies whether the component is disabled or not. The defined action is not invoked when its value is set to true.

Syntax

<apex:actionSupport action="{!incrementCounter}" disabled="false"></apex:actionSupport>

3. disableDefault

The disableDefault attribute is of type Boolean, which specifies whether the default browser processing should be skipped for the associated event or not. By default, its value is set to true.

Syntax

<apex:actionSupport action="{!incrementCounter}" disableDefault="false"></apex:actionSupport>

4. event

The event attribute is of type String used to define the DOM event used for generating AJAX requests. Onclick, ondbclick, onkeyup, etc., are the possible values for this attribute.

Syntax

<apex:actionSupport action="{!incrementCounter}" event="onclick"></apex:actionSupport>

5. focus

The event attribute is of type String that is used for defining the id of that component which is in focus after completion of the AJAX request.

Syntax

<apex:actionSupport action="{!incrementCounter}" id="cmpId"></apex:actionSupport>

6. id

The event attribute is of type String that is used for defining an identifier. It allows the component to be referenced by another component on the page.

Syntax

<apex:actionSupport action="{!incrementCounter}" id="cmpId"></apex:actionSupport>

7. immediate

The immediate attribute is of type Boolean. If its value is true, the action associated with the component will happen immediately. The validation rules associated with the fields on the page will not be processed by the function.

Syntax

<apex:actionSupport action="{!incrementCounter}" immediate= "true"></ apex:actionSupport>

8. oncomplete

String type attribute that defines the JavaScript method invoked when the result of an AJAX update request completes on the client.

Syntax

<apex:actionSupport action="{!incrementCounter}" oncomplete= "{!save}"></ apex:acrtionSupport>

9. onbeforedomupdate

Another string type attribute that defines the JavaScript method that is invoked when the onbeforedomupdate event occurs.

Syntax

<apex:actionSupport action="{!incrementCounter}" onbeforedomupdate= "{!save}"></ apex:actionSupport>

10. onsubmit

The onsubmit attribute is of type string that is used for specifying the JavaScript method before sending an AJAX update request to the server.

Syntax

<apex:actionSupport action="{!incrementCounter}" onsubmit= "{!save}"></ apex:actionSupport>

11. timeout

The timeout attribute is of type Integer that defines the amount of time before an AJAX update request should time out.

Syntax

12. status

The status attribute is of type string that defines the Id of an associated component that displays the status of an AJAX update request.

Syntax

13. reRender

The reRender attribute is of type Object that is basically Id of one or more components which we need to redraw when the client receives the result of the action method.

Its value can be a single Id, comma-separated Id, or collection of Ids.

Syntax

14. rendered

A Boolean attribute is used to specify whether the component is rendered on the page or not. By default, its value is set to true.

Syntax

Let's take an example to understand how we can use the <apex:actionSupport> component in VF:

ApexActionSupportExample.vfp

<!-- Action Support Page with custom controller and tabStyle-->
<apex:page controller="ApexActionSupportController" tabStyle="Contact">
    <apex:form id="apexForm">
        <!-- use pageBlock, pageBlockButtonsn  and pageBlockSection to design apex form-->
        <apex:pageBlock id="pbId" title="New Contact Information">
            <!-- use pageBlockButtons for save and cancel -->
            <apex:pageBlockButtons>
                <apex:outputpanel id="panel1">
                    <apex:outputText value="Save"/>
                    <apex:actionSupport event="onclick" action="{!save}" reRender="pbId" status="statusId"/>
                </apex:outputpanel>
                <apex:actionStatus id="statusId" >
                    <!-- use apex facet for for showing loading image-->
                    <apex:facet name="start" >
                        Saving...                    
                    </apex:facet>
                </apex:actionStatus>
            </apex:pageBlockButtons>
            <!-- pageBlockSection for displaying fields of Contact-->
            <apex:pageBlockSection id="pbSec1" title="Contact Information" collapsible="false">
                <apex:inputField value="{!con.FirstName}"/>
                <apex:inputField value="{!con.LastName}"/>
                <apex:inputField value="{!con.AccountId}"/>
                <apex:inputField value="{!con.Phone}"/>
                <apex:inputField value="{!con.Email}"/>
                <apex:inputField value="{!con.LeadSource}"/>
                <apex:inputField value="{!con.MailingStreet}"/>
                <apex:inputField value="{!con.MailingCity}"/>
                <apex:inputField value="{!con.MailingState}"/>
                <apex:inputField value="{!con.MailingPostalCode}"/>
                <apex:inputField value="{!con.MailingCountry}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

ApexActionSupportController.apxc

// create ApexActionSupportController
public class ApexActionSupportController {
    // declare a variable con of type Contact
    public Contact con{get;set;}
    
    // default constructor
    public ApexActionSupportController(){
        // initialize con
        con = new Contact();
    }
    // create save() method to insert contact
    public PageReference save(){
        //insert con;
        return null;
    }
}

Output