Use of JavaScript Remoting on visualforce page using controller.

Arun Garg   5/19/2017   Comment  

1. I use JavaScript Remoting on visualforce page to show account name on page when user search account by providing name of account in text field and click on button.
2. It fetch the data from database without refreshing the page.
3. I create JavaScript function and call the controller method inside the function.
4. Make the apex controller function static and make the class global.
5. In JavaScript 'getRemoteAccount' , get the value from text field and pass this value in method as a parameter.
6. Search account name by providing proper account name in text field.

Click for Demo

Visualforce Page:

<apex:page controller="AccountRemoter" sidebar="false" showHeader="false">

    <script type="text/javascript">

    function getRemoteAccount() {

        var accountName = document.getElementById('acctSearch').value;

        Visualforce.remoting.Manager.invokeAction(

            '{!$RemoteAction.AccountRemoter.getAccountDetail}',

            accountName, 

            function(result, event){

                if (event.status) {

                    // Get DOM IDs for HTML and Visualforce elements like this

                    document.getElementById('remoteAcctId').innerHTML = result.Name

                    document.getElementById(

                        "{!$Component.block.blockSection.secondItem.acctNumEmployees}"

                        ).innerHTML = result.Phone;

                } 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>

Apex Class:

global with sharing class AccountRemoter {

    public String accountName { get; set; }

    public static Account account { get; set; }

    public AccountRemoter() { } // empty constructor

    

    @RemoteAction

    global static Account getAccountDetail(String accountName) {

        account = [SELECT Id, Name, Phone, Type, NumberOfEmployees 

                   FROM Account WHERE Name = :accountName];

        return account;

    }

}