jQuery And Visualforce Salesforce AJAX 2013

Abstract

This post is for those who want to make AJAX calls in visualforce using 3rd party JavaScript frameworks like jquery, yui , dojo etc. Though most the times the built in visual force Ajax works pretty well and you don’t need to make your hands dirty by doing this. But but but, there are couple of occasions when its required for ex.

  • You are working on a complex DOM structure i.e. there is nesting of HTML elements in a manner not easy to deal with Visual force tags.
  • You want to update the DOM client side, this requires some Ajax calls to query server side data.
  • Visualforce Ajax gives you a way to do this by calling “rerender”, but you want more control on request and response data.

Design

Following is the high level design of custom Http request response in salesforce

image_thumb[1]

So this design comprises of following elements

  1. A dedicated Visualforce page for receiving inbound Ajax http requests. Lets call this page “AjaxResponder
  2. This page can return either “JSON” or “XML” response.
  3. For doing all server side logic an Apex Controller is required that will do the SOQL/SOQL queries. Lets call this “AjaxRespController
  4. A client page to test and do all the Ajax calls. Lets call this “AjaxClient

Implementation (Apex Visualforce code)

We will start with the Server Side code first i.e. AjaxResponder(Visualforce Page) and AjaxRespController (Apex Controller). At last you can find code for the Ajax client page.

AjaxResponder(Visualforce):

Simple visualforce page. Please note that you need to add following apex:page headers. This is because we don’t want any other HTML markup from salesforce in Ajax response.

  • showHeader = false
  • standardstylesheets = false
  • sidebar = false

Apart from this you need to set the content type for JSON response, so add the headercontentType=”application/x-JavaScript; charset=utf-8″. For printing JSON text in visualforce page, just create a string attribute in your controller, for this demo I created “result”, and add this to VF code like this {!result}.

1
2
3
4
<apex:page controller="AjaxRespController"  action="{!doSearch}"
contentType="application/x-JavaScript; charset=utf-8" showHeader="false" standardStylesheets="false" sidebar="false">
{!result}
</apex:page>

AjaxRespController (Apex Controller):

Controller will check the Ajax request parameters and will do the SOQL query stuff. In the code snippet below doSearch() method is called on Ajax call. We have used JsonObject, this is a class adopted from json.org by Ron Hess. You can get it from here. Apart from this there is a getter method called “getResult” it returns the JSON response back to visualforce.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
public class AjaxRespController {
    public JsonObject json {get;set;}
    
    /** invoked on an Ajax request */
    public void doSearch() {
        Map<string,string> params = ApexPages.currentPage().getParameters();
        json = new JsonObject();
        
        // Do SOQL query to see if there are any records !
        List<Contact> records = getRecords(params.get('q'));
        
        if (!records.isEmpty()) {
            // Jsonify the results !
            List<JSONObject.value> values = new List<JSONObject.value>();
            for (Contact c : records) {
                JSONObject cjson = new JSONObject();
                cjson.putOpt('name'new JSONObject.value(c.Name));
                cjson.putOpt('email'new JSONObject.value(c.email));
                values.add(new JSONObject.value(cjson));
            }  
            json.putOpt('contacts'new JSONObject.value(values));
            
        }
    }
    
    // Does the SOQL query, using Ajax request data
    public List<Contact> getRecords(String contactName) {
        List<Contact> records = new List<Contact>();
        if (contactName != null && contactName.trim().length() > 0){
            // Protect from SOQL injection           
            String contactNameToFilter = '%' + contactName  + '%';
            records = [select id, name, email from contact where Name like :contactNameToFilter];
            
        }  
        return records;     
    }   
    // Returns the JSON result string
    public String getResult() {
        return json.ValuetoString();
    }
    
}

Ajax Client (Visual force):

This page is one that presents the user interface to query the results via custom Ajax. The code below is simple markup to do Ajax calls and show JSON response. Please note here in code that to make Ajax calls work, you need to pass an extra param “core.apexpages.devmode.url” with value ‘1’. This is required because without this param the visualforce page is opened in an iframe and you get the iframe code wrapped in other crappy html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<apex:page showHeader=”true” standardStylesheets=”true” ><apex:includeScript value=”{!URLFOR($Resource.jqueryfiles, ‘jquery-1.3.2.min.js’)}”/><script type=”text/javascript”>
var $ = jQuery.noConflict();

$(document).ready(function(){

$(“#searchinput”).click(function(){

$(“#status”).html(
“Making a Jquery Ajax Request to ‘{!$Page.AjaxResponder}'”);

// Make the Ajax Request
$.getJSON(“{!$Page.AjaxResponder}”, {
“core.apexpages.devmode.url” :’1’,
“q” :$(‘#query’).val()
}, function(data) {
$(“#response”).html(JSON.stringify(data));
});

$(“#status”).html(“Ajax Request Completed !”);

});

});
</script>

<a id=”ninjaLink” href=””>NINJA ATTACK!</a>

<apex:sectionHeader title=”Ajax Client Demo” />

<apex:pageblock >
<apex:pageBlockSection title=”Query Console”>
<form id=”qform”>Query String <input type=”text” id=”query” />
<input id=”searchinput” type=”button” value=”Search Contacts ” /></form>
</apex:pageBlocksection>

<apex:pageBlockSection title=”Ajax Console”>
<h1>Status</h1>
<pre id=”status” style=”font-size: 16px” />

<h1> JSON Response </h1>
<div id=”response” style=”font-size: 16px;width: 300px;font-family: monospace; font-stretch: expanded” />
</apex:pageBlocksection>
</apex:pageblock>

</apex:page>

Here is this UI in action

image_thumb[1]

You can copy all the code snippet above and run it directly on your salesforce org. Just replace “[NODE]” in following URL by yours.

https://[NODE].force.com/apex/AjaxClient

https://github.com/AhmadAbdelNaser/salesforce-vs-ajax-AhmadNaserDotCom

About the Author

Hi! I'm Ahmad. I have a degree in Computer Science from Birzeit University and you might call me a bit of computer geek. I am the Founder of Greenbackend Turnkey Solutions a leading Cloud and Hosting Company in the Middle East, Also I am the Founder of Ahmad Naser Turnkey Solutions in Harvey, LA, USA. I'm comfortable with a large range of languages and techniques. After implementing enterprise applications using Salesforce and Siebel CRM for 3 years and with professional experience in building websites, cloud apps, iOS apps, Unity games, Android mobile apps and educational games for 8 years. I decided to share my technical knowledge with people all over the world to benefit from my experience and build their own careers specially because I am a real world example with over 20 successful apps on Google Play Store, Asset Store and Apple Store, So your success is mine and I want to help you reach your goals step by step exactly as I do. I'm passionate about teaching people about technologies, so from time to time I gave courses online and in learning centers and teach beginners and professionals on many technologies and development frameworks. One of my greatest goals in life is growing the next generation of software professionals and to keep teaching programming at every opportunity I get. I can't wait to help you experience the achievement and financial freedom that having a deep understanding of technology brings. So why not start learning to design & develop now by joining our epic Unity 3D professional 2d game development course? See you soon! Ahmad

>