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;
    }
}

Simple Ajax Example Using Visualforce Page.

Hi,
Here i am going to give simple example of using Ajax functionality in Visualforce, In the below example when ever a user enters a key value then it will call the Controller method and fetch the accounts related to text box value.

Visualforce Page:

<apex:page controller="AjaxWildcardController">
  <apex:form >
      <apex:pageBlock >
        Type Account Name Here :<apex:inputText value="{!inputtext}" >
          <apex:actionSupport action="{!actionSupMethod}" event="onkeyup" reRender="outptText" />
        </apex:inputtext>
      </apex:pageBlock>  

    <apex:pageblock >
      <apex:pageblocktable value="{!accList}" var="acc" id="outptText">
        <apex:column value="{!acc.name}"/>
        <apex:column value="{!acc.accountnumber}"/>
      </apex:pageblocktable>
    </apex:pageblock>
  </apex:form>
</apex:page>

Controller :

public class AjaxWildcardController {
Public string inputtext{get;set;}
    Public List<account> accList{get;set;}
    Public boolean flagshow{get;set;}
    Public AjaxWildcardController(){
    flagshow = false;
    }    
    
    Public void actionSupMethod(){
     system.debug('inputtext-->'+inputtext);
    
      accList = database.Query('select name,accountnumber from account where name like '+'\''+'%'+inputtext+'%'+'\'');
    }
        

}

Output : 

What is action support salesforce?

Action support component adds AJAX support to another component, this allows the component to call a controller method when a particular event occurs(for example onlcik, onblur etc). It also allows to rerender,rendere page sections as desired.

In the following example a controller method is called when you click within a textbox using actionsuppot component.

Controller :

Public with sharing class DemoController {

Public String outValueSecond{get;set;}

Public String outvalue{get;set;}

Public boolean flag{get;set;}

  Public DemoController(){

     outvalue = 'Before Value';

     outValueSecond = 'before value set in constructor';

  }

   

  Public void DemoMethod(){

   outValueSecond = 'After value set in controller method. This method is called using action support added to inputtext compoennt';

  }

}

Visualforce Page: 

<apex:page controller="DemoController">

   <apex:form >

       <apex:pageBlock >

             Click Inside this block <apex:inputtext >

            <apex:actionSupport event="onclick" action="{!DemoMethod}" rerender="pgblck"/>

            </apex:inputtext>  

       </apex:pageBlock>

       <apex:pageblock id="pgblck">

             <apex:outputText value="{!outValueSecond }"/>

       </apex:pageblock>

   </apex:form>

</apex:page>

In this example initially the lower pageblock has a value that is set in constructor, but when the mouse is clicked in the text box the controller method is called which changes the value of the variable that is displayed in the lower pageblock. The controller is called by using action support for the inputtext. The action support also rerenders the lower page block which refreshes the lower block and hence shows the new value set in controller method.