Apex:actionFunction Component

The apex:actionFunction component in Salesforce Visualforce is used to invoke a controller action method from JavaScript code on a Visualforce page. It provides a way to execute a server-side action asynchronously without a full-page refresh.

Syntax

The syntax for the apex:actionFunction component is as follows:

<apex:actionFunction name="functionName" action="{!actionMethodName}"
    rerender="commaSeparatedListOfIds" status="statusId">
    <apex:param name="paramName" value="paramValue" />
</apex:actionFunction>

Example

Consider the following example of an apex:actionFunction component:

<apex:page controller="MyController">
    <apex:form id="myForm">
        <apex:outputLabel value="Enter Name" for="nameInput"/>
        <apex:inputText id="nameInput" value="{!name}"/>
        <br/>
        <apex:commandButton value="Search" 
            onclick="searchButtonClick(); return false;"/>
        <apex:actionFunction name="searchButtonClick" 
            action="{!search}" 
            rerender="resultsPanel, errorPanel"/> 
        <apex:outputPanel id="resultsPanel">
            <apex:pageBlock title="Search Results" rendered="{!results != null}">
                <apex:pageBlockTable value="{!results}" var="result">
                    <apex:column headerValue="Name" value="{!result.Name}"/>
                    <apex:column headerValue="Rating" value="{!result.Rating}"/>
                </apex:pageBlockTable>
            </apex:pageBlock>
        </apex:outputPanel>
        <apex:outputPanel id="errorPanel">
            <apex:pageBlock title="Error" rendered="{!error != null}">
                <apex:outputText value="{!error}"/>
            </apex:pageBlock>
        </apex:outputPanel>
    </apex:form>
</apex:page>

In the above example, when the user clicks the Search button, the searchButtonClick JavaScript function is called. This function in turn invokes the search method on the server-side controller without refreshing the page. The results and error messages are then displayed on the page using the outputPanel and pageBlock components.

Explanation

The apex:actionFunction component defines a server-side action that can be invoked from JavaScript code on a Visualforce page. It is used to trigger a controller method to perform some logic on the server-side and update the page with the results asynchronously without a full-page refresh. The name attribute is used to give a name to the JavaScript function that calls the server-side action, and the action attribute specifies the server-side method to call. The rerender attribute is used to specify the components that should be updated on the page after the action is complete.

Use

The apex:actionFunction component can be used to perform server-side actions asynchronously without causing a full-page refresh. It is useful for implementing features such as auto-complete and live search without requiring the user to navigate away from the current page.

Important Points

• The action method specified in the apex:actionFunction component must have a void return type, as it is a JavaScript event that is calling the method.
• The rerender attribute accepts a comma-separated list of IDs that point to the components on the page that should be refreshed after the server-side action is complete.
• The status attribute is optional and is used to specify an ID of an existing HTML element that will be displayed while the server-side action is running.

Summary

The apex:actionFunction component in Salesforce Visualforce is used to execute a controller action method from JavaScript code without a full-page refresh. It provides a way to perform server-side actions asynchronously and update specific components on the page without requiring the user to navigate away from the current page. The rerender attribute is used to specify the components that should be updated after the action is complete, and the status attribute is optional and is used to display a loading indicator while the server-side action is running.