Toggle Side Panel
Close search

Activity › Forums › Salesforce® Discussions › What is the use of Action Function and how to implement it in a Salesforce Visualforce Page?

Tagged: , , , , ,

  • Saurabh

    Member
    May 2, 2017 at 2:58 PM

    Hi Suraj

    A component that provides support for invoking controller action methods directly from JavaScript code using an AJAX request.

    //Example code

    An <apex:actionFunction> component must be a child of an <apex:form> component.

    <apex:page controller="exampleCon">
    <!-- Add the onclick event listener to a panel. When clicked, the panel triggers
    the methodOneInJavascript actionFunction with a param -->
    <apex:outputPanel onclick="methodOneInJavascript('Yes!')" styleClass="btn">
    Click Me
    </apex:outputPanel>
    <apex:form>
    <apex:actionFunction action="{!methodOne}" name="methodOneInJavascript" rerender="showstate">
    <apex:param name="firstParam" assignTo="{!state}" value="" />
    </apex:actionFunction>
    </apex:form>
    </apex:page>

    In the above visualforce page javascript method in the onclickevent will call the apex controller method with the help of actionfunction.
    Apex controller. With the help of actionfunction we can able to make a call to the apex controller class

    /*** Controller ***/
    public class exampleCon {
    String uname;

    public String getUsername() {
    return uname;
    }

    public PageReference sayHello() {
    uname = UserInfo.getName();
    return null;
    }

    public void setState(String n) {
    state = n;
    }

    public String getState() {
    return state;
    }

    public PageReference methodOne() {
    return null;
    }

    private String state = 'no';
    }

    Hope it may help:

  • shariq

    Member
    September 18, 2018 at 11:02 AM

    Hi,

    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>.

    Below is a sample snippet of code :

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

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos