Use JavaScript remoting in Visualforce
to call methods in Apex controllers from JavaScript. Create pages with complex,
dynamic behavior that isn’t possible with the standard Visualforce AJAX
components
Adding JavaScript
Remoting to a Visualforce Page
To use JavaScript remoting in a
Visualforce page, add the request as a JavaScript invocation with the following
form:
[namespace.]controller.method(
[parameters...,]
callbackFunction,
[configuration]
);
namespace: The namespace of the controller class. This is
required if your organization has a namespace defined, or if the class comes
from an installed package.
controller: The name of your Apex controller.
method: The name of the Apex method
you’re calling.
parameters: The comma-separated list of parameters
that your method takes.
callbackFunction: The name of the JavaScript function that
will handle the response from the controller. You can also declare an anonymous
function inline. callbackFunction receives the status of the method call and
the result as parameters.
configuration: configures the handling of the remote call and
response. Use this to specify whether or not to escape the Apex method’s
response. The default value is {escape: true}.
Namespaces and
JavaScript Remoting:
To make it easier to work with
namespaces, especially for pages that make remoting calls to methods provided
in packages, you can use the $RemoteAction global to automatically resolve the
correct namespace, if any, for your remote action. To use this facility, you
must explicitly invoke JavaScript remoting.
The pattern for doing this is:
Visualforce.remoting.Manager.invokeAction(
'fully_qualified_remote_action',
invocation_parameters
);
The fully qualified remote action is a
string that represents the complete path to the remote action method, including
namespace, base class, and so on:
namespace[.BaseClass][.ContainingClass].ConcreteClass.Method. Use $RemoteAction
in an expression to automatically resolve the namespace
Below is the simple working example of
Javascript Remoting,
VF Page :
<apex:page standardController="Account"
extensions="VFRemoting_Con">
<apex:form >
<input type="text"
id="acctSearch"/>
<Button
onclick="getRemoteAccount();return false;">Search</Button>
</apex:form>
<script
type="text/javascript">
function getRemoteAccount()
{
var accountName =
document.getElementById('acctSearch').value;
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.VFRemoting_Con.getaccount}',
accountName, function(result, event){
if (event.status) {
alert("Id : "+result.Id+"\nName :
"+result.Name);
} else if (event.type === 'exception') {
alert("Exception : "+event.message);
} else {
alert("Exception : "+event.message);
}
},
{escape:
true}
);
}
</script>
</apex:page>
Controller :
public class VFRemoting_Con
{
public
VFRemoting_Con(ApexPages.StandardController controller)
{
}
@RemoteAction
public static account
getaccount(string accname)
{
Account
testacc=new Account();
testacc=[Select Id,Name from Account where Name=:accname];
return
testacc;
}
}
JavaScript
Remoting and <apex:actionFunction>:
The
<apex:actionFunction> component also lets you call controller action
methods through JavaScript. Here are some differences between the two:
The
<apex:actionFunction> tag:
- lets you specify rerender targets
- submits the form
- does not require you to write any
JavaScript
JavaScript
remoting:
- lets you pass parameters
- provides a callback
- requires you to write some
JavaScript
In general,
<apex:actionFunction> is easier to use and requires less code, while
JavaScript remoting offers more flexibility.
