Difference Between Action Support And Action Function

Action Support and Action Function are most usable tags in visualforce due to similarities in there functionality most of the  time developer got confused between both so here in this post we will  learn about action support and action function , basic difference between both  and when to use  these tags

So Lets check out what they do : 

Both action support and function can be used to call a controller method using an AJAX request.
Like : calling apex method on button click , or on focus or any other events

Differences Between Action Support And Action Function

1. Action function can call the controller method from java script.
2. Action support adds AJAX support to another visualforce component and then call the controller method.

Example :

<apex:outputpanel id="outptpnl">
        <apex:outputText value="click here"/>
    <apex:actionSupport event="onclick" action="{!controllerMethodName}"  rerender="pgblck" />
</apex:outputpanel>

3. Action function cannot add AJAX support to another component. But from a particular component which has AJAX support(onclick, onblur etc) action function can be called to call the controller method.

<apex:actionFunction name="myactionfun"  action="{!actionFunMethod}" reRender="outptText"/>
 <apex:inputcheckbox onclick="myactionfun" />

Now Lets Understand Actioon support and action function by the help of an example :

Example : Action Function

Visualforce page : Here is visualforce page from which we are calling controller method using action function.

<apex:page controller="ActionFunctionCLS" id="pg" >
  <script>
    function recSave(){
        var accountType = document.getElementById('pg:fm:pb:pbs:actType').value;
        alert('accountType -->'+accountType);
        if(accountType != 'Prospect'){
            alert('You Should Select Prospect to Save the Record');
            return false;
        }
        else{
            saveAccount(); //this is the function name which calls our action function from java Script.
            return true;
        }
    }
 
  </script> 

 <apex:form id="fm">
  <apex:actionfunction name="saveAccount" action="{!Saverec}"  /> <!-- action function calling controller method -->
   <apex:pageBlock id="pb">
     <apex:pagemessages ></apex:pagemessages>
     <apex:pageblockButtons >
      <apex:commandButton value="Save" onclick="recSave();return false;"/>   <!-- calling javascript method on button click --> 
     </apex:pageblockButtons>
    
     <apex:pageblockSection id="pbs">
       <apex:inputField value="{!actobj.Name}" id="actName"/>
       <apex:inputField value="{!actobj.type}" id="actType"/>
     </apex:pageblockSection>
   </apex:pageBlock>
 </apex:form>
</apex:page>

Controller : Controller class example

public class ActionFunctionCLS {
  public Account actObj{get;set;}
   
   PageReference prf= null;
    public ActionFunctionCLS(){
      actObj = new Account();
    }
 
   
    
    public pagereference Saverec(){
   if(actobj.Name !=''){
    insert actobj;
   
   }
   else{
     ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Error: Please Enter Name.');
     ApexPages.addMessage(myMsg);
   
   }
   if(actobj.id !=null){
  
      // Send the user to the detail page for the new account.
      prf = new PageReference('/'+actobj.id);
      prf.setRedirect(true);
   
   }
   return prf;
    }

}

Output :

Example : Action Support

Visualforce page : Here is visualforce page from which we are calling controller method using action Support.

<apex:page controller="exampleCon">
    <apex:form>
        <apex:outputpanel id="counter">
            <apex:outputText value="Click Me!: {!count}"/>
            <apex:actionSupport event="onclick" 
                                action="{!incrementCounter}" 
                                rerender="counter" status="counterStatus"/> <!-- calling controller method using action support -->
        </apex:outputpanel>
        <apex:actionStatus id="counterStatus" 
                           startText=" (incrementing...)" 
                           stopText=" (done)"/>
    </apex:form>
</apex:page>

Controller : Controller class example

public class exampleCon {
    Integer count = 0;
                        
    public PageReference incrementCounter() {
            count++;
            return null;
    }
                    
    public Integer getCount() {
        return count;
    }
}

Hits: 1064