Salesforce Developer Javascript Remoting

salesforce-developer

https://forceadventure.wordpress.com/2013/07/15/javascript-remoting-a-primer/
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_javascript_intro.htm
https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_invoking_javascript_remoting.htm
https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_and_ajax.htm

https://www.youtube.com/watch?v=JaZ1P93vXgk
https://www.youtube.com/watch?v=IgZwbpgh42o -
https://www.youtube.com/watch?v=w9GK1IVH4BY
https://www.youtube.com/watch?v=IgZwbpgh42o
https://www.youtube.com/watch?v=eiuiDjYih18
https://www.youtube.com/watch?v=odZpA6yrOYY
https://www.youtube.com/watch?v=-EWASoKbqdA
https://www.youtube.com/watch?v=FBrP7nnWwuU
https://www.youtube.com/watch?v=Z079X6j7A4k
https://www.youtube.com/watch?v=xV0NADf8piE
https://www.youtube.com/watch?v=EQKqKUtCRHc
https://www.youtube.com/watch?v=g4f54Szt1zU
https://www.youtube.com/watch?v=32ebJH5HK7I
https://www.youtube.com/watch?v=RlfLCWKxHJ0
https://www.youtube.com/watch?v=Z079X6j7A4k
https://www.youtube.com/watch?v=ZWjkdfWpWFU
https://www.youtube.com/watch?v=eiuiDjYih18
https://www.youtube.com/watch?v=Uieuyfr6kqE
https://www.youtube.com/watch?v=8yDwN0FrDjg
https://www.youtube.com/watch?v=7XFk9VKxSe4
https://www.youtube.com/watch?v=hoUb9yB3jjI
https://www.youtube.com/watch?v=11OUWMgMVOc
https://www.youtube.com/watch?v=sJZ_P4To6l8
https://www.youtube.com/watch?v=PwdluptAr-c
https://www.youtube.com/watch?v=Bue5-_RrX50

Example 1 - Fetch some data
Example 2 - Form Submission
Example 3 - File Upload
Example 4 - Concurrency Issue

// Salesforce - Developer - JavaScript Remoting:

There are other libraries that make use of the same global variable name ("$") 
that jQuery uses by default — Force.com's default interface commonly includes at 
least one such library. Considering this issue, combining jQuery with Force.com 
interfaces can cause a conflict on the client side. There's an easy solution, 
however:

j$ = jQuery.noConflict();

$j("#popupDiv").dialog({ autoOpen: false, modal: true, position: 'center'  });

Finding specific HTML nodes within the dynamically generated content of 
Visualforce can be a little tricky, because Visualforce prepends components with 
its own variables.  For example, consider this Apex repeater:

<apex:dataList value="{!accounts}" var="account" id="theList">
  <a class="accounts" id="list-{!account.id}" href="/{!account.id}">
    <apex:outputText value="{!account.name}"/>
  </a>
</apex:dataList>

When the above code is rendered, the dataList has id of "j_id0:theList".  
Fortunately, jQuery makes it easy to work with using partial selectors.  To find 
an element with the above dynamically generated ID, we can use the following:

$('[id*=theList]')

Another trick of using jQuery with Visualforce is the ability to reference 
non-standard data attributes.  For example, when we want to send some data 
about an account on a specific link when the user clicks the link, we can use:

<a href="" class="accountLink" data-account="{!account.name}|{!account.Phone}">
  <apex:outputText value="{!account.name}"/>
</a>

Now, we can create a click event that reference that data:

$(".accountLink").click(function() {
  data = $(this).data('account').split('|');
  showDialog(data[0],data[1]);
});

JavaScript remoting is a feature of the Force.com platform that lets you 
integrate Apex controller methods directly with JavaScript functions. Without 
JavaScript remoting, you would have to use traditional Apex form components and 
manage associated view state.

To set up remoting methods on the controller side, use the RemoteAction 
annotation:

public class MyCustomController { 
  public MyCustomController() {}

  @RemoteAction
  public static String createContact(string FirstName, string LastName) {
    Contact c = new Contact(FirstName=FirstName,LastName=LastName);
    insert c;
    return c.Id;
  }
}

Now, from a Visualforce page that references a RemoteAction controller method, 
JavaScript can call the method by utilizing the name of the controller as an 
object:

<apex:page Controller="MyCustomController">
  <script>
    j$ = jQuery.noConflict();
    j$(document).ready(function() {
      j$(".createContact").click(function() { 
        MyCustomController.createContact(
          j$('#firstName').val(),
          j$('#lastName').val(),
          handleContactCreate
        );
      });
    );

    function handleContactCreate(result,event) {
      if(event.type == 'exception') {
        alert(event.message);
      } else {
        alert('A contact was created with the ID: '+result);
      }
    }
  </script>
</apex:page>

The function call in JavaScript passes values for the RemoteAction method 
parameters, followed by the name of a JavaScript handler function that can 
receive the results as well as information about the event (such as if there 
was an error). On the client side, functions are called asynchronously, and on 
the server, the methods are static.

First, you’ll need an globally scoped Apex class, with a static function 
defining the logic you want JavaScript to access.  By adding the RemoteAction 
annotation, you’ll be letting Visualforce know it should wrap this logic in a 
JavaScript friendly way:

global class remoteTest {
  @RemoteAction
  global static Contact[] findContacts(string Name) {
    Name = '%'+Name+'%';
    Contact[] c = [SELECT ID, Name, Phone, Email from Contact where NAME LIKE :Name ];
    return c;
  }
}

From there, associate the Visualforce to the class as a controller or extension, 
and Visualforce will include the ability to call the method from JavaScript.  
The framework works on asynchronous results, so after passing in your params, 
we can grab the result from a handler function.  In this case, we are taking our 
list of contacts and assigning it to a global array for use.

var contacts;
function contactSearch(name) {
  remoteTest.findContacts(name,handleContacts);
}
function handleContacts(result, event) {
  if(event.type == 'exception') {
    alert(event.message);
  } else {
    contacts = result;
    showContacts();
  }
}

Then we can access the contacts and the fields I brought down with SOQL. In this 
example, we’ll use the returned array of contacts to browse for email and phone 
numbers. Here’s the complete, albiet quick and rough, Visualforce page:

var contacts;
function contactSearch(name) {
  remoteTest.findContacts(name,handleContacts);
}
function handleContacts(result, event) {
  if(event.type == 'exception') {
    alert(event.message);
  } else {
    contacts = result;
    showContacts();
  }
}
function showContacts() {
  var newList = "";
  for (var i = 0; i < contacts.length; i++) {
    newList += "<button>"+contacts[i].Name+"</button>";
  }
  document.getElementById('contactList').innerHTML = newList;
}
function showContact(index) {
  document.getElementById('phone').innerHTML = 'Phone: '+contacts[index].Phone;
  document.getElementById('email').innerHTML = 'Email: '+contacts[index].Email;
}

<button>Search Contacts</button>

And there we have it.  With minimal overhead and effort, we have JavaScript 
powered by Apex in a client friendly manner.  While the event object returned 
in the callback includes the type (so that you can determine if there was an 
error) and message (to get the proper error message from Apex), we can also poke 
around there and see which class and method we were calling from Apex if we need 
it.  They are the action and method fields on the event object, respectively.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License