Tuesday, April 8, 2014

JQuery in Salesforce

Steps to start using JQuery in Salesforce ...

1. Download the latest JQuery zip. As of this writing, the zip has css, js and development-bundle folders along with index.html. To use in Salesforce you need only the css and js folders.
2. Delete everything else except for the css and js folder (and their content). create a new zip file, preferably with only these 2 folders (and their content) in it. Make sure what the zip's internal path structure looks like. Whether css js are root folders or they have a parent.
3. In Salesforce upload this zip file via Setup > Develop > Static Resources > New.
4. The Name of the resource provided will be used in the !URLFOR function. Also set the cache control to public.
5. JQuery is now uploaded in Salesforce as a static resource. Creating a zip file is a good practice both from a JavaScript perspective and a Salesforce static resource limitation perspective.
6. Following is an apex visualforce page to test JQuery
<apex:page>
    <apex:includeScript value="{!URLFOR($Resource.avjquery, 'js/jquery-1.10.2.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.avjquery, 'js/jquery-ui-1.10.4.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.avjquery, 'js/jquery-ui-1.10.4.min.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.avjquery, 'css/ui-lightness/jquery-ui-1.10.4.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.avjquery, 'css/ui-lightness/jquery-ui-1.10.4.min.css')}"/>
 
     <script type="text/javascript">
         var jq$ = jQuery.noConflict();
 
        jq$(document).ready(function(){
            jq$("#avLink").click(function() {
                alert("Hooo HAA");
            });
        });
     </script>        
 
    <a id="avLink" href="">Click me to check whether JQuery is installed ?!</a>
 
</apex:page>
Clicking on the link should display the JQuery popup. If not then check whether the path to the js is correct as mentioned in step 2. The noConflict() function just makes sure that we will refer to the uploaded JQuery as jq$

No comments :

Powered by Blogger.