In this article, I will demonstrate how you can integrate jQuery with Visualforce Page.
- Download jQuery: You need to download jQuery. jQuery UI site is having a custom download builder which you can use to download jQuery. I prefer using custom download builder from jQuery UI website. Here is the link: jQuery UI
- Add downloaded jQuery zip file as Static Resource: On your Salesforce Development org, go to Setup -> Build -> Develop -> Static Resources. Click on add and add the downloaded zip file. Give it a name. I have given the name jQuery1_11. (Don’t worry, no naming convention here. You can choose any name).
- Refer jQuery on your Visualforce Page: In this step, you need to refer jQuery on your Visualforce page and below is the way how you can do that.
<apex:includeScript value="{!URLFOR($Resource.jQuery1_11, '/js/jquery-1.11.2.min.js')}"/>
- The important step: Salesforce implement many javascript libraries. So the first major hurdle is to make sure that jQuery didn’t interfere with any other javascript libraries that Salesforce has implemented. jQuery uses by default the global variable “$”, so we are not supposed to use that. The simple solution for this is to use jQuery.noConflict() and to avoid using “$” for the jQuery syntax. Below is the code you need to write-
var j$ = jQuery.noConflict();
j$(document).ready(function(){
//WRITE ALL YOUR FUNCTIONALITIES
});
That’s all. Below is a small example which you can use to verify whether you have configured Salesforce successfully or not.
<apex:page >
<apex:includeScript value="{!URLFOR($Resource.jQuery1_11, '/js/jquery-1.11.2.min.js')}"/>
<script type="text/javascript">
var j$ = jQuery.noConflict();
j$(document).ready(function(){
j$("#clickLink").click(function() {
alert("WoW!! You hace configured jQuery successfully!!!!!");
});
});
</script>
<a id="clickLink" href="">CLICK HERE TO TEST!</a>
</apex:page>