<apex: actionFunction> Component in Visualforce Page

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

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

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

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

5. name

The name attribute is of type string that is used for defining the name of the JavaScript function.

Syntax

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

7. timeout

The timeout attribute is of type Integer that defines the amount of time before an AJAX update request should time out.

Syntax

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

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.

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

12. onbeforedomupdate

Another string type attribute that defines the JavaScript method invoked when the onbeforedomupdate event occurs.

Syntax

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

Output