+ Start a Discussion
vickySFDCvickySFDC 

What is main use of<apex:actionsupport> and <apex:actionfunction> really confusing?

Hi All,

This two VF tags I am really confusing

Can anyone give examples <apex:actionsupport> and <apex:actionfunction> tags and give some examples?

 

 

Thanks,

 

Vicky

Best Answer chosen by Admin (Salesforce Developers) 
asish1989asish1989

HI

A component that provides support for invoking controller action methods directly from JavaScript code using an AJAX request. An <apex:actionFunction> component must be a child of an<apex:form> component.

 

Used when we need to perform similar action on varioud events. Een though you can use it in place of actionSupport as well where only event is related to only one control.

Example

<!-- Page: -->
	<apex:page controller="exampleCon">
	<apex:form>
		<!-- Define the JavaScript function sayHello-->
		<apex:actionFunction name="sayHello" action="{!sayHello}" rerender="out"
		status="myStatus"/>
	</apex:form>
	
	<apex:outputPanel id="out">
		<apex:outputText value="Hello "/>
		<apex:actionStatus startText="requesting..." id="myStatus">
		<apex:facet name="stop">{!username}</apex:facet>
		</apex:actionStatus>
	</apex:outputPanel>
	
	<!-- Call the sayHello JavaScript function using a script element-->
	<script>window.setTimeout(sayHello,2000)</script>
	<p><apex:outputText value="Clicked? {!state}" id="showstate" /></p>
	<!-- Add the onclick event listener to a panel. When clicked, the panel triggers
	the methodOneInJavascript actionFunction with a param -->
	<apex:outputPanel onclick="methodOneInJavascript('Yes!')" styleClass="btn">
		Click Me
	</apex:outputPanel>
	
	<apex:form>
		<apex:actionFunction action="{!methodOne}" name="methodOneInJavascript"
		rerender="showstate">
			<apex:param name="firstParam" assignTo="{!state}" value="" />
		</apex:actionFunction>
	</apex:form>
</apex:page>

/*** Controller ***/
public class exampleCon {
	String uname;
	public String getUsername() {
		return uname;
	}
	public PageReference sayHello() {
		uname = UserInfo.getName();
		return null;
	}
	public void setState(String n) {
		state = n;
	}
	public String getState() {
		return state;
	}
	public PageReference methodOne() {
		return null;
	}
	private String state = 'no';
}

 

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

 

Used when we want to perform an action on a perticular eventof any control like onchange of any text box or picklist.

 

Example

<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"/>
		</apex:outputpanel>
		
		<apex:actionStatus id="counterStatus"
			startText=" (incrementing...)"
			stopText=" (done)"/>
	</apex:form>
</apex:page>


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

 If this post answers your questions please mark it as solved and hit kudos button if it helps you

 

Thanks

 

All Answers

asish1989asish1989

HI

A component that provides support for invoking controller action methods directly from JavaScript code using an AJAX request. An <apex:actionFunction> component must be a child of an<apex:form> component.

 

Used when we need to perform similar action on varioud events. Een though you can use it in place of actionSupport as well where only event is related to only one control.

Example

<!-- Page: -->
	<apex:page controller="exampleCon">
	<apex:form>
		<!-- Define the JavaScript function sayHello-->
		<apex:actionFunction name="sayHello" action="{!sayHello}" rerender="out"
		status="myStatus"/>
	</apex:form>
	
	<apex:outputPanel id="out">
		<apex:outputText value="Hello "/>
		<apex:actionStatus startText="requesting..." id="myStatus">
		<apex:facet name="stop">{!username}</apex:facet>
		</apex:actionStatus>
	</apex:outputPanel>
	
	<!-- Call the sayHello JavaScript function using a script element-->
	<script>window.setTimeout(sayHello,2000)</script>
	<p><apex:outputText value="Clicked? {!state}" id="showstate" /></p>
	<!-- Add the onclick event listener to a panel. When clicked, the panel triggers
	the methodOneInJavascript actionFunction with a param -->
	<apex:outputPanel onclick="methodOneInJavascript('Yes!')" styleClass="btn">
		Click Me
	</apex:outputPanel>
	
	<apex:form>
		<apex:actionFunction action="{!methodOne}" name="methodOneInJavascript"
		rerender="showstate">
			<apex:param name="firstParam" assignTo="{!state}" value="" />
		</apex:actionFunction>
	</apex:form>
</apex:page>

/*** Controller ***/
public class exampleCon {
	String uname;
	public String getUsername() {
		return uname;
	}
	public PageReference sayHello() {
		uname = UserInfo.getName();
		return null;
	}
	public void setState(String n) {
		state = n;
	}
	public String getState() {
		return state;
	}
	public PageReference methodOne() {
		return null;
	}
	private String state = 'no';
}

 

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

 

Used when we want to perform an action on a perticular eventof any control like onchange of any text box or picklist.

 

Example

<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"/>
		</apex:outputpanel>
		
		<apex:actionStatus id="counterStatus"
			startText=" (incrementing...)"
			stopText=" (done)"/>
	</apex:form>
</apex:page>


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

 If this post answers your questions please mark it as solved and hit kudos button if it helps you

 

Thanks

 

This was selected as the best answer
vickySFDCvickySFDC
Thanks very helpful Asish
arsaniketsharmaarsaniketsharma
Both action support and action function can be used to call a 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. 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. 
    for example:

     <apex:outputpanel id="outptpnl">
             <apex:outputText value="click here"/>
         <apex:actionSupport event="onclick" action="{!controllerMethodName}"  rerender="pgblck" />
     </apex:outputpanel> 
  
Here action support adds AJAX to output panel, so once you click on output panel controller method will be called.
  
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.
Example:

 <apex:actionFunction name="myactionfun"  action="{!actionFunMethod}" reRender="outptText"/>
 <apex:inputcheckbox onclick="myactionfun" />
In this example onlick of input checkbox "myactionfun" action function is called from where controller method "actionFunMethod" gets called.