An Example showing How to Make Synchronous calls with AJAX Toolkit

1. <apex:page >  
2. <script type="text/javascript">  
3.         var __sfdcSessionId = '{!GETSESSIONID()}';  
4.         </script>  
5.     <script src="../../soap/ajax/29.0/connection.js" type="text/javascript"/>  
6.   
7.     <script>  
8.   
9.     window.onload = setupPage;  
10.         function setupPage() {  
11.             var output = document.getElementById("output");  
12.             var startTime = new Date().getTime()  
13.             try {  
14.                 var queryResult = sforce.connection.query("Select Id, Name, Industry From Account order by Industry limit 30");  
15.                 layoutResults(queryResult, output, startTime);  
16.             } catch(error) {  
17.                 queryFailed(error, output);  
18.             }  
19.         }  
20.         function queryFailed(error, out) {  
21.             out.innerHTML = "<font color=red>An error has occurred:</font> <p>" + error;  
22.         }  
23.         function layoutResults(queryResult, out, startTime) {  
24.             var timeTaken = new Date().getTime() - startTime;  
25.                 if (queryResult.size > 0) {  
26.                 var output = "";  
27.                 var records = queryResult.getArray('records');  
28.                 for (var i = 0; i < records.length; i++) {  
29.                     var account = records[i];  
30.                     output += account.Id + " " + account.Name + " [Industry - "+ account.Industry + "]<BR>";  
31.                 }  
32.                     out.innerHTML = output + "<BR> query completed in: " + timeTaken + " ms.";  
33.                 } else {  
34.                     out.innerHTML = "No records matched.";  
35.                 }  
36.         }  
37.     </script>  
38. <div id="output"></div>  
39. </apex:page>  

Quick Link to parent document:  Embedding API Calls in JavaScript

How to pass values from Javascript to an Apex Controller using apex:actionFunction and apex:param components?

Through JavaScript Remoting for Apex Controllers , we come to know that parameters can be passed from JavaScript to the Apex controller's method annotated with @RemoteAction. Let's see how to pass values from Javascript to an Apex Controller using apex:actionFunction and apex:param components.

Code Snippet

JavaScript

1.   

Visualforce Page

1.   
2. <apex:actionFunction name="doSelectedMaterials" action="{!handleSelectedMaterials}"  reRender="" status="statusAddRemove">  
3.     <apex:param name="p1" value="" assignTo="{!contextMaterial}" />  
4. </apex:actionFunction>  
5.   
6.   
7. <apex:actionFunction name="doDeSelectedMaterials" action="{!handleDeselectedMaterials}" reRender="" status="statusAddRemove">  
8.     <apex:param name="p2" value="" assignTo="{!contextMaterial}" />  
9. </apex:actionFunction>  
10.   
11. <apex:inputCheckbox id="idCheckbox" value="{!subs.IsSelected}" onclick="" onchange="doCheckboxChange(this, '{!subs.parentMaterial.ContractNumber}-{!subs.parentMaterial.MaterialNumber}')" />  

Apex Controller

1. public String contextMaterial { get; set; }  
2. public Set setSelectedMaterials ;  
3.   
4. //Handle selected Materials  
5. public void handleSelectedMaterials(){  
6.   if(mapMaterial.containsKey(contextMaterial)){  
7.   setSelectedMaterials.add(mapMaterial.get(contextMaterial));  
8.   }  
9.   
10.   
11. }  
12.   
13.   
14. //Handle de-selected Materials  
15. public void handleDeselectedMaterials(){  
16.   if(mapMaterial.containsKey(contextMaterial)){  
17.   setSelectedMaterials.remove(mapMaterial.get(contextMaterial));  
18.   }  
19. }  

Points to be noted

The caveat here is: You must specify a reRender attribute in the tag.

Without this, the generated function does take any parameters, but as soon as you put it in place, it does - even if you just leave it empty.

Happy Apex Implementation...!