Find your content:

Search form

You are here

Call javascript function from your apex method


The basic need for me is to find distance between 2 accounts. I have the lat and long of addresses in accounts stored in as custom fields in Account object.

In My VF page i have 2 lookups to choose the accounts. I also have a command button which would query the accounts and get the lat and long for these accounts. After which i need to call a javascript method

<apex:pageBlock title="Check Distance Between Vendors" mode="edit"  id="theBlock" >
    <apex:pageBlockButtons location="both">
        <apex:commandButton value="Find Distance" action="{!chkDistance}" rerender="theBlock"/>
    <apex:pageBlockSection columns="2">
        <apex:inputfield value="{!Equipment.Ship_From__c}"></apex:inputfield>
        <apex:inputfield value="{!Equipment.ShipTo__c}"></apex:inputfield>

My javascript function

function calculateDistances(){
    var origin1 = new google.maps.LatLng(55.930385, -3.118425); // hardcoded for now, these would come from the query of Account
    var destinationB = new google.maps.LatLng(50.087692, 14.421150);

    var service = new google.maps.DistanceMatrixService();
        origins: [origin1],
        destinations: [destinationB],
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC,
        avoidHighways: false,
        avoidTolls: false
    }, callback);   

function callback(response, status) {
    if (status != google.maps.DistanceMatrixStatus.OK) {
        alert('Error was: ' + status);
    } else {

My query here is

  1. how do we call the javascript function after running the apex method to query on Accounts.
  2. How do we get the queried lat longs into the javascript


Attribution to: Prady

Possible Suggestion/Solution #1

Have you considered Javascript Remoting ?

Instead of using an actionbutton you could execute a javascript function launching a method in the controller. You'd receive a callback to javascript, where you can continue executing your required logic.

Documentation and an example can be found here:

Attribution to: Samuel De Rycke

Possible Suggestion/Solution #2

I'd upvote the Javascript Remoting answer if I was able :)

The other option (for completeness) is to:

  • Use the oncomplete attribute in the commandbutton (pass the name of the callback method)
  • Store the lat/long values in controller variables, and include them on the page with a style that hides them
  • Call your controller method - this should populate the variables, and re-render the part of the page that includes them with the new values
  • In the oncomplete method, grab the long/lat variables from the page and calculate the distance.

Not done the above, but as I understand it, that would work. Compared to Javascript Remoting however, it's nowhere near as neat.

Also, see this answer to a similar question: I can't verify if it'll work, but presuming the math is right, you could save yourself a second callout.

Attribution to: GBreavin

Possible Suggestion/Solution #3

Have you tried using AJAX instead

  1. Use this

    <script src="../../soap/ajax/23.0/connection.js" type="text/javascript"></script>
  2. On the Commandbutton onClick event, call the Javascript function by passing the AccountId's, something like

  3. In the javascript function, use sforce.connection.query() , now you should be getting the values for the further processing.

Attribution to: logontokartik

Possible Suggestion/Solution #4

JS Remoting is often preferred here - if for some reason that does not work for you, use the actionFunction component to tie the Apex callback to a JS method.

Attribution to: joshbirk
This content is remixed from stackoverflow or stackexchange. Please visit

My Block Status

My Block Content