In this blog we will learn about <apex:actionFunction> tag. This tag is used to invoke Apex action by using JavaScript asynchronously via AJAX requests.
JavaScript is Dynamic scripting language which perform action on client side. By use of this language we can reduce traffic on web server. <apex:actionFunction> and <apex:actionSupport> are two components which we use in visualforce page to execute different JavaScript task.
Attributes:
Attribute Name | Type | Description | Required |
---|---|---|---|
action | ApexPages.Action | The action method invoked when the actionFunction is called by a DOM event elsewhere in the page markup.If an action is not specified, the page simply refreshes. Example action = “{!delete}” | No |
focus | String | The ID of the component that is in focus after the AJAX request completes. | |
id | String | Identifier | No |
immediate | Boolean | A Boolean value that specifies whether the action associated with this component should happen immediately, without processing any validation rules associated with the fields on the page. Default is set to false. | |
name | String | The name of the JavaScript function that, when invoked elsewhere in the page markup | Yes |
namespace | String | The namespace to use for the generated JavaScript function.For example, “webkul” and “wk_vfPage” are supported as namespaces. | |
onbeforedomupdate | String | The JavaScript invoked when the onbeforedomupdate event occurs–that is, when the AJAX request has been processed, but before the browser’s DOM is updated. | No |
oncomplete | String | The JavaScript invoked when the result of an AJAX update request completes on the client. | No |
rendered | Boolean | It specifies whether the component is rendered on the page. Default is true. | |
reRender | Object | Id of component to be refresh | No |
status | String | Id of component to show the Status of an AJAX update request. | No |
timeout | Integer | The amount of time (in milliseconds) before an AJAX update request should time out. | No |
Example
Here is an example how to use action function in visualforce page. In this example we will create account by using action function then update it asynchronously.
1). You have to create a VisualForce page by using following code.
<apex:page controller="exampleJs" tabstyle="Account"> <!-- /** * Webkul Software. * * @category Webkul * @author Webkul * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com) * @license https://store.webkul.com/license.html */ --> <style> .progressBar { width: 0; height : 13px; border : grey; background : green; } .loading{ Display: none; position:Absolute; top:-2px; left:-2px; width:100%; height:100%; background:black; opacity: .5; border:0; } .loadingMessage { Display: none; position:fixed; width:100px; height:30px; padding:10px 5px; top:50%; Left:50%; margin-top:-25px; margin-left:-60px; background:#ffffff; border:3px solid #ffba1a; Color:#222222; font-size:12px; font-weight:bold; } </style> <script> var i = 0; var j = 0; function load() { document.getElementById("wholeLoad").style.display="Block"; document.getElementById("lodMsg").style.display="Block"; return false; } function color() { if(i<10) { j += 10; document.getElementById("progressBar").style.width = j+'%' ; i++; } } </script> <apex:form > <apex:actionFunction action="{!createAccount}" name="createRecordJS" status="createStatus" oncomplete="updateAccount();" /> <apex:actionFunction action="{!updateAccount}" name="updateAccount" status="wsStatus" oncomplete="color(),createRecordJS();"/> <apex:outputPanel id="statuses"> <div class="loading" id="wholeLoad"/> <div class="loadingMessage" id="lodMsg"> <div class="progressBar" id = "progressBar"> </div> Processing.... </div> </apex:outputPanel> <apex:outputPanel id="msgs"> <apex:pageMessages /> </apex:outputPanel> <div><input name="CreateAndCall" class="btn" type="button" value="Create And Update !!!" onclick="load(),createRecordJS();return false;"/></div> </apex:form> </apex:page>
2). Create apex class say exampleJs and write following code.
public with sharing class exampleJs { /** * Webkul Software. * * @category Webkul * @author Webkul * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com) * @license https://store.webkul.com/license.html */ Account myAccount; integer i =0; //Creates an account record. public PageReference createAccount() { //Create an account using DML operation. if(i<10){ myAccount = new Account(name = 'Webkul Software Pvt. Ltd.'); insert myAccount; i++; return null; } else { pageReference pg =page.remoteAction; pg.setRedirect(true); return pg; } } public PageReference updateAccount() { // Update the same account record myAccount.Name = 'Webkul After Update'; update myAccount; return null; } }
Output
Support
That’s all for Action Funtion , still if you have any further query feel free to add a ticket, we will be happy to help you https://webkul.uvdesk.com/en/customer/create-ticket/.
Be the first to comment.