+ Start a Discussion
SS KarthickSS Karthick 

How to call action function in javascript remoting

Hi folks,
       Can anyone tell me how to call the action function in visualforce javascript remoting?
My usecase is I want to execute action method after ther remoting 

I've onclick and action method in command button
 I want to perform onclick first which perform some remote action once it completed then it will call the action method
for that how to write the code?

Thanks in adavnce
Mudasir WaniMudasir Wani
Hey Karthick,

Here is an exaple 
<apex:page controller="DF12RemotingController" docType="html-5.0" showHeader="false" standardStylesheets="false">

<apex:styleSheet value="{!$Resource.AdvVFWebinarCSS}"/>

<apex:composition template="DF12Template">

    <apex:define name="pageTitle">DF '12: JavaScript Remoting Example</apex:define>

    <apex:define name="header">
        <h1 class="pageTitle">Find Customer</h1>
        <h4>JavaScript Remoting Example</h4>

    <apex:define name="body">

        <input id="searchField" type="text" placeholder="Enter Last Name"/>
        <button type="button" onclick="console.log('Step 1: Search button clicked.');DF12Examples.handleButtonClick();">Search</button>
        <table cellpadding="0" cellspacing="0">
            <tbody id="results"></tbody>

        <div class="cheatLinkSeparator">
            <a class="cheatLink" href="{!$Page.DF12Action}" title="Open apex:actionFunction Example">apex:actionFunction Example</a>


    <apex:define name="pageScripts">

            // startTime and endTime are only being created for logging purposes, but
            // note that I am initializing their values to Date objects. this is so
            // JavaScript doesn't have to guess what kind of variables they are
            // (and therefore, doesn't have to change their datatype mid-execution).
            // this is a best practice for all JS variable declarations to help with
            // performance.
            DF12Examples.startTime = new Date();
            DF12Examples.endTime = new Date();

            // gets called when the 'Search' button is clicked
            DF12Examples.handleButtonClick = function() {
                console.log('Step 2: JS function handleButtonClick() called.');
                DF12Examples.startTime = Date.now();
                var searchTerm = document.getElementById("searchField").value;
                // call the apex controller method tagged w/ the @RemoteAction annotation.
                // the syntax is ControllerName.methodName(methodArguments, jsCallbackFunctionName, options).
                // the 'options' argument is optional.
                console.log('Step 3: JS function that maps to Apex controller method doSearch(String customerLastName) - via @RemoteAction annotation - called.');
                DF12RemotingController.doSearch(searchTerm, DF12Examples.renderResults);

            // this is the js callback function that will execute when the @RemoteAction method
            // in the apex controller is done executing. it will always receive two arguments
            // passed from the controller method: 1) the JSON-encoded results, and an 'event'
            // object, which tells you if everything went ok on the server side.
            DF12Examples.renderResults = function (results, event) {
                console.log('Step 4: Results recieved. JavaScript function renderResults() called.');
                // if the apex method completed execution, event.status is true.
                if (event.status) {
                    // if there was an exception, you should handle it here.
                    if (event.type === "exception") {
                        // do stuff
                    } else {
                        // this is the empty <tbody> tag on the page
                        var container = document.getElementById("results"),
                                 html = [];
                        for (var i=0, j=results.length; i<j; i++) {
                            html.push(results[i].LastName + ", " + results[i].FirstName);
                        // this won't work in IE, because IE doesn't handle setting
                        // innerHTML for <tr> or <tbody> tags. *sigh*. To get this
                        // working in IE, you'd need to use document.createElement()
                        // for every DOM node you want to create, then use appendChild()
                        // to attach them to the correct parent.
                        container.innerHTML = html.join("");
                DF12Examples.endTime = Date.now();
                if (console) {
                    console.log("elapsed time: " + (DF12Examples.endTime - DF12Examples.startTime) + "ms");



public with sharing class DF12RemotingController {

    public static List<Contact> doSearch(String customerLastName) {
        // be careful when doing LIKE queries with '%' wildcards on both
        // sides of the query term, especially when using non-indexed
        // fields, as performance can suffer
        customerLastName = '%' + customerLastName + '%';
        return [
            SELECT Id, FirstName, LastName 
            FROM Contact 
            WHERE LastName LIKE :customerLastName 
            ORDER BY LastName, FirstName 
            LIMIT 200

    private static void testDoSearch() {
        List<Contact> control = new List<Contact>();
        control.add(new Contact(LastName = 'Smith', FirstName = 'Joe1', Email = 'test@test.test.test.test'));
        control.add(new Contact(LastName = 'Smith', FirstName = 'Joe2', Email = 'test@test.test.test.test'));
        insert control;
        List<Contact> actual = DF12RemotingController.doSearch('Smith');
        System.assert(actual.size() == 2, 'There should be two contacts named Smith here.');


Donot forget to select best answer to make our efforts visible in the developer forum.
Please mark this as solution by selecting it as best answer if this solves your problem, So that if anyone has this issue this post can help