The <apex:actionFunction> component is one of the most used components to invoke the controller's action methods from the JavaScript code directly by using an AJAX request.
This component should always be the child component of the <apex:form> because binding between the caller and the <apex:actionFunction> component is done based on parameter order. We have to ensure the order of the <apex:param> matches the caller's argument list.
The <apex:actionFunction> is different from the <apex:actionSupport>. The <apex:actionSupport> invokes controller action methods from other VF components. However, the <apex:actionFunction> defines a new JavaScript function that can be called from within a block of JS code.
The <apex:actionFunction> component has the following attributes:
1. action
The action attribute is of type string that defines the action method invoked when the <apex:actionFunction> is called by the DOM event elsewhere in the page markup.
Syntax
<apex:actionFunction action= "{!save}"></ apex:actionFunction>
2. focus
The focus attribute is of type string that defines the id of the component that is in focus after the AJAX request completes.
Syntax
<apex:actionFunction focus= "focusId"></ apex:actionFunction>
3. id
The id attribute is of type string that is a unique identifier allowing the <apex:actionFunction> component to be referenced by other components on the page.
Syntax
<apex:actionFunction id= "functionId"></ apex:actionFunction>
4. immediate
The immediate attribute is of type Boolean. If its value is true, the action associated with the component will happen immediately. The function will not process the validation rules associated with the fields on the page.
Syntax
<apex:actionFunction immediate= "true"></ apex:actionFunction>
5. name
The name attribute is of type string that is used for defining the name of the JavaScript function.
Syntax
<apex:actionFunction name= "saveRecords"></ apex:actionFunction>
6. namespace
The namespace attribute is of type string that is used for defining the namespace, i.e., to be used for the generated JavaScript function.
Syntax
AD
<apex:actionFunction namespace= " Your_App_Name_v2"></ apex:actionFunction>
7. timeout
The timeout attribute is of type Integer that defines the amount of time before an AJAX update request should time out.
Syntax
<apex:actionFunction timeout= " 200"></ apex:actionFunction>
8. status
The status attribute is of type string that defines the Id of an associated component that displays the status of an AJAX update request.
Syntax
<apex:actionFunction status= " statusId"></ apex:actionFunction>
9. reRender
The reRender attribute is of type Object that is Id of one or more components which we need to redraw when the client receives the result of the action method.
AD
Its value can be a single Id, comma-separated Id, or a collection of Ids.
Syntax
<apex:actionFunction reRender= " div1" action= "{!save}"></ apex:actionFunction>
10. rendered
A Boolean attribute is used to specify whether the component is rendered on the page or not. By default, its value is set to true.
Syntax
<apex:actionFunction rendered= " div1" action= "{!save}"></ apex:actionFunction>
11. oncomplete
String type attribute that defines the JavaScript method invoked when the result of an AJAX update request completes on the client.
Syntax
<apex:actionFunction oncomplete= "{!save}"></ apex:actionFunction>
12. onbeforedomupdate
Another string type attribute that defines the JavaScript method invoked when the onbeforedomupdate event occurs.
Syntax
<apex:actionFunction onbeforedomupdate= "{!save}"></ apex:actionFunction>
Let's take an example to understand how we can use the apex actionFunction in the code:
ApexActionFunctionExample.vfp
<!-- Action Function Page -->
<apex:page controller="ApexActionFunctionController" title="Action Function Example" showHeader="false">
<!-- apply slds on this page-->
<apex:slds />
<div style="padding: 5px 0px 0px 10px;">
<!-- Define the JavaScript function printMsg by using actionFunction inside form-->
<apex:form>
<apex:actionFunction name="printMsg" action="{!printMsg}" rerender="panel1" status="statusId"/>
</apex:form>
<!-- create a panel that will redraw when the result of the action method returns to the client -->
<apex:outputPanel id="panel1">
<apex:outputText value="Hi "/>
<apex:actionStatus startText="requesting..." id="statusId">
<apex:facet name="stop">{!username}</apex:facet>
</apex:actionStatus>
</apex:outputPanel>
<!-- Call the printMsg JavaScript function with the help of the script element-->
<script>window.setTimeout(printMsg, 2000)</script>
<!-- output text inside the paragraph will show whether the button is clicked or not-->
<p>
<apex:outputText value="Clicked? {!state}" id="stateId" />
</p>
<!-- add the onclick event listener to a panel that calls the callApex actionFunction with a param -->
<apex:outputPanel onclick="callApex('Yes!')" styleClass="slds-button slds-button_neutral" style="margin-top:10px;">
Click Me
</apex:outputPanel>
<!-- Define the JavaScript function callApex with params by using actionFunction inside form-->
<apex:form>
<apex:actionFunction action="{!findState}" name="callApex" rerender="stateId">
<apex:param name="firstParam" assignTo="{!state}" value="" />
</apex:actionFunction>
</apex:form>
</div>
</apex:page>
ApexActionFunctionController.apxc
public class ApexActionFunctionController {
String currentUser;
private String state = 'No!';
// create getter that returns username to the VF page
public String getUsername() {
return currentUser;
}
// create printMsg method to set the current user name to the variable
public PageReference printMsg() {
currentUser = UserInfo.getFirstName()+' '+UserInfo.getLastName();
return null;
}
// create setter to set the state of the button
public void setState(String state) {
this.state = state;
}
// create a getter to get the state of the button
public String getState() {
return state;
}
// create findState method that simply returns null to VF
public PageReference findState() {
return null;
}
}
