Activity Forums Salesforce® Discussions How to add Javascript Remoting to a Visualforce Page in Salesforce? Reply To: How to add Javascript Remoting to a Visualforce Page in Salesforce?

  • Avnish Yadav

    Member
    September 18, 2018 at 1:30 pm

    Hello,

    Remote action function in salesforce allows user to access any method from any class through javasrcipt methods, and get the result as a javascript object for further manipulation.

    Points to remember while implementing remote action function:

    Remote action method should have @RemoteAction annotation.
    The method should also be Global and Static

    Example:-

    global with sharing class ContactJs {
    public ContactJs() { } // empty constructor

    @RemoteAction //the function to be called in remote action should use this annotation
    global static list<Contact> getcon() {
    //function should be static and global else it will throw error
    list<Contact> con1 = [SELECT id,name FROM contact limit 5];
    if(con1!=null && !con1.isEmpty()){
    return con1;
    }else{
    return  new list<contact>();
    }
    }
    }
    Vf Page:-

    <apex:page controller="ContactJs">
    <script type = "text/javascript">
    function getRemoteContact() {
    var a;
    Visualforce.remoting.Manager.invokeAction(
    //Invoking controller action getcon
    '{!$RemoteAction.ContactJs.getcon}',

    function(result, event){
    //We can access the records through the parameter result
    //event.status determines if there is error or not
    if(event.status){
    document.getElementById('remoteContactId').innerHTML = 'Contact Name: <br/><br/>';
    for(a=0;a<result.length;a++){
    document.getElementById('remoteContactId').innerHTML +=  result[a].Name +'<br/>';
    }
    }
    },
    {escape: true}
    );
    }
    </script>

    <button onclick="getRemoteContact()">Get Contact</button>
    <div id="responseErrors"></div>
    <apex:pageBlock id="block">
    <apex:pageBlockSection id="blockSection" columns="2">
    <span id="remoteContactId"></span>
    </apex:pageBlockSection>
    </apex:pageBlock>
    </apex:page>

    Hope this, will help you.

    Thanks.