How to use apex:actionFunction in a Salesforce Visualforce Page?

SCENARIO

While working on one of the requirements for a banking sector project for a customer based in San Diego, California there was a requirement to update selected record in Visual Force Page.

 

Clicking on Update button, we need to pass the updated values from inputs of Visualforce page to apex class so that is that DML operations can be performed.

 

SOLUTION

To fulfil the requirement, we have used <apex:actionFuntion> tag of Visualforce page. By using this tag, we can call apex controller method from java script code using an AJAX request.  

To set field values directly from VF page, we have used <apex:param> with <apex:actionFunction> and added this keyword in the assignedTo attribute of <apex:param>. 

 

Below is a sample code for reference. Here we are updating Account Name using <apex:actionFunction>.

1. On click of Update button, JS function will get the updated value of Account Name and pass it to the param of actionFunction. 
2. The actionFunction first sets the value of the variable and then invokes the method of apex class to update the account record. 

ActionFunction.vfp 

<apex:page controller="actionFunctionExampleController" sidebar="false" showHeader="false">
    <div style="margin : 20px;">
        
        <apex:form id="accountForm">
            <apex:actionFunction action="{!updateAccount}" name="updateAccountAF" reRender="dataTable">
                <apex:param name="accountName" assignTo="{!this.account.Name}" value="" />
            </apex:actionFunction>
            
            <apex:outputpanel >
                <label>Name :</label>
                <apex:inputField id="accountName" value="{!account.Name}"/>
                <apex:commandButton value="Update" onclick="GetAccountName(); return false;" />
            </apex:outputpanel>
        </apex:form>
        
        <div style="margin:20px 0px;">
            <apex:dataTable value="{!account}" var="acc" id="dataTable" border="1" width="50%">
                <apex:column value="{!acc.Name}" headerValue="Name"/>
                <apex:column value="{!acc.Type}" headerValue="Type"/>
                <apex:column value="{!acc.AccountNumber}" headerValue="Account Number"/>            
                <apex:column value="{!acc.Industry}" headerValue="Industry"/>
            </apex:dataTable>
        </div>
    </div>
    
    <script type="text/javascript">
        function GetAccountName(){
            var accountName = document.getElementById("{!$Component.accountForm.accountName}").value;        
            updateAccountAF(accountName);
        }
    </script>
    
</apex:page>

ActionFunctionController.apxc 

public class actionFunctionExampleController {
    
    public Account account {get;set;}
        
    public actionFunctionExampleController(){
        Id accountId  = ApexPages.CurrentPage().getparameters().get('id');
        account = [select id, Name, AccountNumber, Type, Industry from Account where id =: accountId ];
    }
    
    public void updateAccount(){
        update account;
    }
}

NOTE: 

Also, we can get the values of <apex:param> by using the below code in apex class. For that, we don't need to write assignedTo attribute in VF page. 

Apexpages.currentPage().getParameters.get(‘paramName’);

FACTS TO CONSIDER:

• An <apex:actionFunction> component must be a child of an <apex:form> component.
• Since the caller and <apex:actionFunction> are bound based on parameter order, make sure the caller's argument list matches the order of <apex:param>. 
• For API version 23 or later, you cannot use <apex:actionFunction> inside an iteration component like, <apex:pageBlockTable>, <apex:repeat>, and so on. 

 

OUTPUT

If you have any questions you can reach out our Salesforce Consulting team here.