---
schema_version: "1"
id: 86156ee25d2d7b5dba3a92d4364c9ecafd4483b357033d8ec572cad82160519f
title: JavaScript Remoting Example
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/javascript/pages-js-remoting-example.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-js-remoting-example.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 70236d4a7432a6b3c303a857c0a06c3876705f68106efeb53de7698594b57c82
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# JavaScript Remoting Example

Here’s a basic sample demonstrating how to use JavaScript remoting in your Visualforce pages.

First, create an Apex controller called `AccountRemoter`:

<!-- otherprops: apex_code set_clipboard -->
```controller
global with sharing class AccountRemoter {

    public String accountName { get; set; }
    public static Account account { get; set; }
    public AccountRemoter() { } // empty constructor
    
    @RemoteAction
    global static Account getAccount(String accountName) {
        account = [SELECT Id, Name, Phone, Type, NumberOfEmployees 
                   FROM Account WHERE Name = :accountName];
        return account;
    }
}
```

Other than the `@RemoteAction` annotation, this looks like any other controller definition.

To make use of this remote method, create a Visualforce page that looks like this:

<!-- otherprops: apex_page set_clipboard -->
```markup
<apex:page controller="AccountRemoter">
    <script type="text/javascript">
    function getRemoteAccount() {
        var accountName = document.getElementById('acctSearch').value;

        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.AccountRemoter.getAccount}',
            accountName, 
            function(result, event){
                if (event.status) {
                    // Get DOM IDs for HTML and Visualforce elements like this
                    document.getElementById('remoteAcctId').innerHTML = result.Id
                    document.getElementById(
                        "{!$Component.block.blockSection.secondItem.acctNumEmployees}"
                        ).innerHTML = result.NumberOfEmployees;
                } 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="acctSearch" type="text"/>
    <button onclick="getRemoteAccount()">Get Account</button>
    <div id="responseErrors"></div>

    <apex:pageBlock id="block">
        <apex:pageBlockSection id="blockSection" columns="2">
            <apex:pageBlockSectionItem id="firstItem">
                <span id="remoteAcctId"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="secondItem">
                <apex:outputText id="acctNumEmployees"/>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>
```

Notice the following about this markup:

-   The JavaScript uses the explicit `invokeAction` remoting call, and takes advantage of the `$RemoteAction` global to resolve the correct namespace for the remote action method.
-   The `event.status` variable is `true` only if the call was successful. The error handling illustrated by the example is deliberately simple and prints the error message and stack trace from the `event.message` and `event.where` values, respectively. You’re encouraged to implement more robust alternative logic for requests where your method call doesn’t succeed.
-   The `result` variable represents the object returned from the Apex `getAccount` method.
-   Accessing the DOM ID of a plain HTML element is simple, just use the ID of the item.
-   DOM IDs of Visualforce components are dynamically generated in order to ensure IDs are unique. The code above uses the technique illustrated in [Using $Component to Reference Components from JavaScript](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-access.md#using-component-to-reference-components-from-javascript) to retrieve the component’s ID by accessing it via the `$Component` global variable.