JavaScript Visualforce Remoting (Remote Action) In Salsforce

Arun Garg   8/17/2017   Salesforce Remoting   Comment  

Remote Action

The RemoteAction annotation provides support for Apex methods used in Visualforce to be called via JavaScript. This process is often referred to as JavaScript remoting.

Remote action is generally use to hit the data from the database and fetches some values from it.

You can get data from the database without getting your page refresh again an again.

Methods with the RemoteAction annotation must be static and either global or public in class.

In your controller, your Apex method declaration is preceded with the @RemoteAction annotation like this:

Remote Action Method Syntax

@RemoteAction

global static String getItemId(String objectName) { ... }

How To Use Remote Action Using Apex class and Visualforce Page

Step 1:

Create an apex class with method having @remoteaction annotation. And method must be static.

Step 2:

Create a visualforce page and inside that page call remote action method by using JavaScript and get the result.

Step 3:  

Open the visualforce page put some value (for example we have one custom object and we are searching data on the basis of location so we will put some location for which record is already created and will fetch the details of that record).

Example of Remote Action (JavaScript Remoting)

Now create apex class with remoting method, refer below-

Apex Class

global with sharing class LocationSearchCntrlr {     public String location{ get; set; }     public static Form__c form { get; set; }     public LocationSearchCntrlr() { } // empty constructor         @RemoteAction     global static Form__c getForm(String location) {         form = [SELECT Id, Full_Name__c, name FROM Form__c WHERE Location__c = :location];         return form ;     } }

Now create visualforce page to call remoting method using JavaScript from controller.

Visualforce Page

<apex:page controller="LocationSearchCntrlr">                 <script type="text/javascript">     function getRemoteForm()                 {         var location = document.getElementById('locSearch').value;         Visualforce.remoting.Manager.invokeAction(             '{!$RemoteAction.LocationSearchCntrlr.getForm}',             location ,             function(result, event)                                                 {                 if (event.status) {                     // Get DOM IDs for HTML and Visualforce elements like this                     document.getElementById(                         "{!$Component.block.blockSection.secondItem.name}"                         ).innerHTML = result.Full_Name__c;                 } else if (event.type === 'exception') {                     document.getElementById("responseErrors").innerHTML =                         event.message + "<br/>\n<pre>" + event.where + "</pre>";                 } else {                     document.getElementById("responseErrors").innerHTML = event.message;                 }             },             {escape: true}         );     }     </script>    <input id="locSearch" type="text"/>     <button onclick="getRemoteForm()">Get Info</button>     <div id="responseErrors"></div>     <apex:pageBlock id="block">         <apex:pageBlockSection id="blockSection" columns="2">                       <apex:pageBlockSectionItem id="secondItem">                 <apex:outputText id="name"/>             </apex:pageBlockSectionItem>         </apex:pageBlockSection>     </apex:pageBlock> </apex:page>

After successfully save the page and class then preview visualforce page and search any location in search box then it will fetch data from the ‘Form’ custom object.