Problem using Visualforce Remoting on std page layout with URL parameter

Question

this is my first try at a VF Remoting call with a controller, and i'm getting a standard VF error when using the call. My setup is as follows:

This is the VF page code:

    <apex:page showHeader="false" sidebar="false" standardController="Contact" extensions="WS_getRemoteLeadStatus">
<script src="{!URLFOR($Resource.jquery19validate, 'jquery.min.js')}"/>
<script src="{!URLFOR($Resource.jquery19validate, 'jquery.validate.js')}"/>
<script type="text/javascript">
var j$ = jQuery.noConflict();

j$(document).ready(function(){


j$.urlParam = function(name){
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return results[1] || 0;
    }
};

var usrid = j$.urlParam('usrid');




function getStatus(usrid)
{


    Visualforce.remoting.timeout = 120000; // Set timeout at page level
    var result = $Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.WS_getRemoteLeadStatus.getLeadStatus}', usrid,HandleResult);    //calling the remote action & 
                                                                                             //getting the vals
                                                                                              // for inserting into the DOM
        function HandleResult(result, event)
        {
            if (event.status) 
            {
            document.getElementById("amount").textContent = result;
            }
            else if (event.type === 'exception') 
            {
            document.getElementById("exception") = 
            event.message + "<br/>\n<pre>" + event.where + "</pre>";
            } 
            else 
            {
            document.getElementById("exception").textContent = event.message;
            }
        }

};
});

</script>
<apex:form>
<div id="black">
<div id="amount" style="align:left;">Amount:  </div><div id="until" style="align:right;" >Valid: </div><div id="exception">
Errors: </div>
<button onclick="getStatus();">Getstatus</button>
</div>
</apex:form>
</apex:page>

And this is the controller code:

global class WS_getRemoteLeadStatus {

    private final ApexPages.StandardController controller;
    public WS_GoMobileStatus(ApexPages.StandardController controller){
    this.controller = controller;
    }

    webservice String usrid { get; private set; }

    public WS_getRemoteLeadStatus() {
    kennitala = ApexPages.currentPage().getParameters().get('usrid');
    }
    @RemoteAction
    global static String GetLeadStatus(String usrid){

        String endp = 'https://ENDPOINT_URL/getLead?action=GetRemoteLeadStatus&usrid=';


         HttpRequest req = new HttpRequest();
         req.setMethod('GET');
         req.setHeader('Content-Type','application/json; charset=utf-8');
         req.setHeader('User-Agent', 'force.com');
         req.setEndpoint(endp+=usrid);

         Http http = new Http();
         HTTPResponse res = new HTTPResponse();

          try {

        //Execute web service call here     
        res = http.send(req);   



        //Helpful debug messages
        System.debug(res.toString());
        System.debug('STATUS:'+res.getStatus());
        System.debug('STATUS_CODE:'+res.getStatusCode());

} catch(System.CalloutException e) {
    //Exception handling goes here....
}       


        return res.toString();


    }
}

i'm using Jquery 1.9 and the first Javascript function is supposed to get the current parameters from the page, like you do with

String var = ApexPages.currentPage().getParameters().get('var');

but it isn't working. So i created a custom button on the Contact layout and set a usrid parameter from a custom field on the Contact object. The Apex code for the LeadStatus web service works fine when called via Anonymous Apex but whenever I call it via the custom button it throws a "Formula Expression is required on the action attributes. " error. As far as i can see, this has got something to do with PageReference - my idea is to use VF remoting to fetch a lead Status value and an dynamically update the HTML. is that possible using VF Remoting & Jquery (or other such DOM manipulation)?

Answer 1

The apex:commandButton component is designed to render HTML buttons that make calls to an Apex Controller only, e.g. to call Apex code not JavaScript code. I am actually suprised it let you save your Visualforce page, having tested it myself it appears it does, anyway, you get the exception because the value you've given in the 'action' attribute does not follow the merge-field syntax.

The action method invoked by the AJAX request to the server. Use merge-field syntax to reference the method. For example, action="{!save}" references the save method in the controller.

You need to use a regular HTML button element to render your own button and use the onclick attribute to call your JavaScript function getStatus. Take a closer look at this topic in the Visualforce Developers Guide on JavaScript Remoting, where this example is shown.

 <button onclick="getStatus();">Get Lead Status</button>