Salesforce Developer Javascript Remoting Example1

salesforce-developer-javascript-remoting

// Salesforce - Developer - JavaScript Remoting - Example 1 (Fetch data):

Consider the following Visualforce page:

<apex:page controller="JSRemotingBasicsController" id="page">
  <script type="text/javascript">
//Method to get static text from the controller
//Sends no parameters to the controller method  
    function getText() {
      var text = "";
      JSRemotingBasicsController.doGetText(
        function(result, event) {
          if(event.type === 'exception') {
            console.log("exception");
            console.log(event);
          } else if (event.status) {
            text = result;
            document.getElementById('textResponseSpan').innerHTML = text;
            document.getElementById('
                {!$Component.page.textResponseApexOutputText}'
            ).innerHTML = text;
          } else {
            console.log(event.message);
          }
        }
      );
    }
  </script>

  <h2>Simple Javascript Remoting Examples </h2> <br/> <br/>

  <button onclick="getText()">Get Static Text</button> <br/>
  <span id="textResponseSpan"></span> <br/>
  <apex:outputText id="textResponseApexOutputText"></apex:outputText>
</apex:page>

and the corresponding controller:

global with sharing class JSRemotingBasicsController {
    public JSRemotingBasicsController() {
    }

    @RemoteAction
    public static String doGetText() {
        return 'Hey, we got a response!';
    }
}

Note that the name of the controller is JSRemotingBasicsController (whatever we 
decide to name it).  This is also somehow available to JavaScript, and we can 
invoke its doGetText method from JavaScript (we need to look at the generated 
JavaScript code).  What is the purpose of 
{!$Component.page.textResponseApexOutputText}?

Also note the following:

1. The method being called by Javascript Remoting must be annotated with 
   @RemoteAction

2. The method must also be static

3. You may have noticed that we’re setting the text we receive back in 2 
   different places. It’s just an example to show the following:

   a. DOM Ids of visualforce components must be explicitly spelled out 
      (page.textResponseApexOutputText)
   b. DOM Ids of regular HTML elements is simpler (textResponseSpan)

When you click the button that says “Get Static Text”, the onClick event will 
fire and call the Javascript method getText(). That method calls the doGetText() 
method on the controller. That method returns a string (“Hey, we got a 
response!”) 

Note that in the above Visualforce page, we also have a JavaScription of the 
form: 

function(result, event) {
}

This is an anonymous javascript function, and the result parameter refers to the 
data the method in the controller returns when the method executes, and the event 
parameter represents an object that has details about the request that was sent 
and the response received. Common attributes you might use are; status (boolean 
indicating whether the request was successful), statusCode, type, and even 
result which should match the result mentioned above.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License