How to use apex:actionFunction and apex:actionStatus in Salesforce Visualforce Page?
How to use apex:actionFunction and apex:actionStatus in visualforce page ?
apex:actionFunction -
It provides support for calling an apex method from JavaScript code using an AJAX request. An <apex:actionFunction> component must be a child of an <apex:form> component. An apex:actionFunction cannot be placed inside an iteration component <apex:pageBlockTable>, <apex:repeat>. [1]
apex:actionStatus -
A component that displays the status of an AJAX update request. An AJAX request can either be in progress or complete. [2]
A snippet of code for the Salesforce Visualforce Page:
<apex:page standardController="Opportunity" showHeader="false" Sidebar="false" extensions="actionfunctionDemo"> <style> .m-top25{margin: 5px 0 10px 0} .m-buttom{margin-top: -13px;position: absolute;left: 7.5%;} body .order-create-btn{display:block;text-align:left;padding-left:30%} body .order-create-btn .btn{display: inline-block;vertical-align: middle;padding: 5px;text-decoration:none;margin-left:7px} body .order-create-btn .btnDisabled{display: inline-block;vertical-align: middle;padding: 5px;text-decoration:none ;margin-right:15px} .order-create-btn .loading{display: inline-block;vertical-align: middle;} </style> <div class="m-top25"><apex:pageMessages id="errorId" /></div> <apex:form id="theform"> <div class="m-buttom"/> <apex:outputPanel> <span class="order-create-btn"> <a class="btn" onclick="checkDoubleSubmit(this)" target="_top">Update Opportunity</a> <apex:actionStatus startText="Updating...." id="statusId" styleclass="loading"></apex:actionStatus> </span> </apex:outputPanel> <apex:actionfunction name="updateOpportunity" action="{!updateOpp}" rerender="theform,errorId" oncomplete="lod({!reloadPage});" status="statusId"/> <script> function lod(isReLoad) { if(isReLoad == true) { top.location.href="/"+"{!thisOpportunity.Id}"; } } </script> <script> var isClicked = false; function checkDoubleSubmit(obj){ if (isClicked) { alert('Please wait. Updating TRACT....');//For testing message only. return false; } else { isClicked = true; obj.className = 'btnDisabled';//only shows the button as disabled. updateOpportunity(); return false; } } </script> </apex:form> </apex:page>
A snippet of code for the Salesforce Apex Controller:
public class actionfunctionDemo { public Opportunity thisOpportunity{get;set;} public boolean reloadPage{get;set;} public actionfunctionDemo(ApexPages.StandardController controller){ reloadPage = true; thisOpportunity = (Opportunity) controller.getRecord(); } public void updateOpp(){ thisOpportunity.Name = 'UpdateName'; try{ update thisOpportunity; } catch(Exception ex){ ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.FATAL, ex.getMessage()); ApexPages.addMessage(myMsg); } } }
Here are some screenshots which are showing our apex:actionFunction and apex: actionStatus. We have embedded our Visualforce Page in a section on an opportunity. The page will look like below screenshot :
On click of 'Update Opportunity' button, an apex action will call that update the opportunity.
Here is a video that shows the working of apexfunction :
Look into the video before the click of 'Update Opportunity' button the opportunity name was 'Test opportunity' and after a click of the button the name update to 'Update Name'.
Resources:
(1) http://sfdcsrini.blogspot.com/2014/06/how-to-use-apexactionfunction-in.html
(2) https://developer.salesforce.com/forums/?id=906F0000000kCGDIA2