How to Use Apex:actionSupport tag in Visualforce Page.

How to Use Apex:actionSupport tag in Visualforce Page.

 <apex:actionSupport>

A component that adds AJAX support to another component, allowing the component to be refreshed asynchronously by the server when a particular event occurs, such as a button click or mouseover.

actionSupport component adds AJAX support to other components in visualforce. It allows components to be refreshed asynchronously by calling the controller’s method when any event occurs (like click on button). It allows us to do partial page refresh asynchronously without refreshing  full page.

In the example below, initially count value is set to 0. But when we will click on ‘Click here to increment! ‘, then controller action method will be called and count will be incremented. Also outputText component will be rendered without refreshing complete page.

Similarly when we will click on ‘Click here to decrement!’, then controller action method will be called and count will be decremented. Also outputText component will be rendered without refreshing complete page.

apex:actionSupport has following attributes in our example:

• action: action attribute specifies the controllers action method that will be invoked when event occurs.
• event: It is DOM event that generates AJAX request
• reRender: It is comma separated id’s of components that needs to be partially refreshed. In our example, we have given its value as ‘out’. So component with ‘out’ id will be refreshed without refreshing complete page.

Attribute	Description
action	The action method invoked by the AJAX request to the server. Use merge-field syntax to reference the method. For example, action="{!incrementCounter}" references the incrementCounter() method in the controller. If an action is not specified, the page simply refreshes.
disabled	A Boolean value that allows you to disable the component. When set to "true", the action is not invoked when the event is fired.
disableDefault	A Boolean value that specifies whether the default browser processing should be skipped for the associated event. If set to true, this processing is skipped. If not specified, this value defaults to true.
event	The DOM event that generates the AJAX request. Possible values include "onblur", "onchange", "onclick", "ondblclick", "onfocus", "onkeydown", "onkeypress", "onkeyup", "onmousedown", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onselect", and so on.
focus	The ID of the component that is in focus after the AJAX request completes.
id	An identifier that allows the component to be referenced by other components in the page.
immediate	A Boolean value that specifies whether the action associated with this component should happen immediately, without processing any validation rules associated with the fields on the page. If set to true, the action happens immediately and validation rules are skipped. If not specified, this value defaults to false.
onbeforedomupdate	The JavaScript invoked when the onbeforedomupdate event occurs--that is, when the AJAX request has been processed, but before the browser's DOM is updated.
oncomplete	The JavaScript invoked when the result of an AJAX update request completes on the client.
onsubmit	The JavaScript invoked before an AJAX update request has been sent to the server.
rendered	A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true.
reRender	The ID of one or more components that are redrawn when the result of an AJAX update request returns to the client. This value can be a single ID, a comma-separated list of IDs, or a merge field expression for a list or collection of IDs.
status	The ID of an associated component that displays the status of an AJAX update request. See the actionStatus component.
timeout	The amount of time (in milliseconds) before an AJAX update request should time out.

 
 Example 1 :

<apex:page controller="actionSupportController">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection >
                <apex:outputpanel id="panel1">
                    <apex:outputText value="Click here to increment!"/>
                    <apex:actionSupport event="onclick" action="{!incrementCounter}" rerender="out"/>
                </apex:outputpanel>

                <apex:outputpanel id="panel2">
                    <apex:outputText value="Click here to decrement!"/>
                    <apex:actionSupport event="onclick" action="{!decrementCounter}" rerender="out"/>
                </apex:outputpanel>

                <apex:outputText value="{!count}" id="out" label="Count Is:"/>

            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Controller : 

public class actionSupportController {
    Integer count = 0;

    public PageReference incrementCounter() {
            count++;
            return null;
    }

    public PageReference decrementCounter() {
            count--;
            return null;
    }

    public Integer getCount() {
        return count;
    }
}

Example 2:
http://sfdcsrini.blogspot.com/2014/08/simple-ajax-example-using-visualforce.html

Example 3: 
http://sfdcsrini.blogspot.com/2014/09/what-is-action-support-salesforce.html

Posted in: action support in visualforce page,actionsupport in visualforce page.,ajax support using apex:actionsupport,Salesforce,Visualforce,Visualforce Pages