actionSupport vs actionFunction

April 27, 2017 nisarkhan actionSupport actionFunction, 0

. Both actionSupport and actionFunction can be call to an Controller method using an AJAX request.
* for example call controller onclick of a inputcheck box
* or call a controller method onfocus of a input field
Well, they both do the same thing of calling controller method.

Difference between both:

1. actionSupport adds AJAX support to another visualforce component and then call the controller method.

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

the above example uses the actionSupport, which adds AJAX to ouputPanel so when the user clicks on the outputPanel controller will be called.

2. actionFunction can call the controller method from javaScript.

actionFunction cannot add AJAX support to outputPanel so when the user clicks on outputPanel controller method will be called

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

In the below example actionFunction can also be called from JavaScript:

<apex:actionFunction name="myactionfun"  action="{!actionFunMethod}" reRender="outptText"/>
<apex:inputcheckbox onclick="myJavaMethod()" />
<script>
   function myJavaMethod(){
     myactionfun(); //this call the actionFunction
  }
</script>

Visualforce Page:

<apex:page controller="ActionSupFunController">
 <apex:form >
  <h1>Demonstration of difference between actionFunction and actionSupport</h1>

  <apex:actionFunction name="myactionfun"  action="{!actionFunMethod}" reRender="outptText"/><br></br> <br></br> 
  
  Input Text <apex:inputText >
                <apex:actionSupport action="{!actionSupMethod}" event="onclick" reRender="outptText" />
             </apex:inputText> <br></br>
             
Click me to call action function method   <apex:inputcheckbox onclick="myJavaMethod()" /><br></br> <br></br>   
    <apex:pageBlock >
        <apex:outputText value="{!Display_This_String}" id="outptText"/>
    </apex:pageBlock>         

  <script>
   function myJavaMethod(){
   var checkinput = confirm('Are sure you wnat to call action function method?');
   if(checkinput == true) 
      myactionfun();
  }
  </script>
 </apex:form> 
</apex:page>

 
Public with sharing class ActionSupFunController {
Public string Display_This_String{get;set;}
    Public ActionSupFunController (){
     Display_This_String = 'value set in constructor';
    }
    
    Public void actionFunMethod(){
      Display_This_String = 'value set in action function method';
    }
    
    Public void actionSupMethod(){
      Display_This_String = 'value set in action Support method';
    }
} 

Favorite

Apex from Custom button or Javascript : Ajax toolkit Instantiating an SObject Dynamically at Run-time