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

Report

Harassment or bullying behavior
Harassment or bullying behavior
Contains mature or sensitive content
Contains misleading or false information
Mobile App Reported Contents
Contains abusive or derogatory content
Contains spam, fake content or potential malware

Block Member?

Please confirm you want to block this member.

You will no longer be able to:

  • See blocked member's posts
  • Mention this member in posts
  • Invite this member to groups
  • Message this member
  • Add this member as a connection

Please note: This action will also remove this member from your connections and send a report to the site admin. Please allow a few minutes for this process to complete.

Report

You have already reported this .