LET'S LEARN TOGETHER. THE BEAUTIFUL THING ABOUT LEARNING IS NOBODY CAN TAKE IT AWAY FROM YOU.

Integrating jQuery with Visualforce


In this article, I will demonstrate how you can integrate jQuery with Visualforce Page. 
jQuery is the open-source JavaScript framework that Web developers use to solve basic app development problems across all browsers while opening the code to the public for community-driven development and support. 
jQuery can be used with Visualforce Page for user interface development. It will simplify the basic functionalities like DOM manipulation. The another biggest advantage of jQuery is that it is having a huge library of UI elements which you can use with Visualforce to make your user interface more interesting.
Below are the steps-
  • 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.
Create a simple Visualforce page with the below code -
<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>
When you will run the Visualforce page, you should see the below screen -
Clicking on if you see the below screen, it indicates you have successfully configured jQuery with visualforce
Congrats!! If you have any feedback, please let me know. Thanks in advance.
Share:

No comments:

Post a Comment

Follow Me

Enter your email address:

Delivered by FeedBurner

Popular Posts

Labels

Salesforce (105) Apex (45) admin (27) visualforce (21) ADM (20) dev 501 (19) integration (18) learn salesforce (18) 501 (16) SOAP (13) lightning (12) tutorial (11) Certification. (9) javascript (9) Certification (7) Trigger (7) test class (7) unit testing (7) Advanced Admin (6) Sharing and Visibility (6) design pattern (6) developer (6) report (6) salesforce release (6) security (6) trailhead (6) Advanced Apex (5) Kitchener Developer Group (5) New Features (5) SOQL (5) css (5) dashboard (5) debug (5) formula (5) mobile (5) service cloud (5) solution management (5) use case (5) JSON (4) Lightning Experience (4) Salesforce DX (4) WebSphere (4) best practice (4) cast iron (4) component (4) deployment (4) github (4) html (4) polymer (4) profiles (4) responsive (4) tdd (4) ui (4) Architect (3) Live Chat (3) Online Event (3) Opportunity (3) Performance (3) Products (3) REST (3) Role (3) Sales Cloud (3) Scratch Org (3) Study Notes. (3) Summer15 (3) Tips (3) Web Technology (3) dynamic apex (3) event (3) license (3) map (3) mapbox (3) singleton (3) version controlling (3) Asynchronous callout (2) Bulkify (2) Data Architecture and Management Certification (2) Devops (2) Distributed Version Controlling (2) ES6 (2) Eclipse (2) Einstein (2) Enterprise Territory Management (2) Financial Services Cloud (2) Force.com IDE (2) Governor Limit (2) Groups (2) IBM (2) Implicit Sharing (2) JourneyToCTA (2) Kitchener User Group (2) Lightning Design System (2) Live Agent (2) Metadata (2) PD II (2) Price Book (2) SOSL (2) Sharing (2) Spring 15 (2) Summer17 (2) Territory (2) ant (2) automation tool (2) basic (2) chatter (2) coding (2) communication (2) console (2) controller (2) documentation (2) flow (2) git (2) jquery (2) logging (2) object (2) permission (2) process builder (2) release (2) salesforce1 (2) strategy (2) xml (2) Action Plan (1) Action Plan Template (1) Advanced Currency (1) Agent Productivity (1) Analytics (1) Apex Sharing (1) Arrow (1) Asynchronous Apex (1) Aura Framework (1) Batch (1) Bots (1) Browser (1) Bulk data load (1) CTA (1) Calendar (1) Canon (1) Case Management (1) Celebration (1) Cheat Sheet (1) Classic (1) Community (1) Confetti (1) Constructor (1) Contact Center (1) Continuation (1) Continuous Integration (1) Convert (1) Cookie (1) Custom Metadata (1) Custom Object (1) Customer (1) Dated Exchange Rate (1) Decorator Design Pattern (1) Dev Hub (1) Diwali (1) Email (1) FSC (1) Function (1) Future (1) Goals (1) Guide (1) Household (1) Ideas (1) Improvement (1) KPIs (1) Large Data Volume (1) LastModifiedDate (1) Lightning Web Component (1) Manage Currencies (1) Manual Sharing (1) Metrics (1) Multi Currency (1) New (1) New Feature (1) OOPS (1) OWD (1) Omni-Channel (1) Partner (1) Person Account (1) Photo (1) Pipeline (1) Platform Developer I (1) Platform Developer II (1) Presentation (1) Product Schedule (1) Profile (1) Promise (1) Prototype (1) Public Site (1) Query Plan (1) Queueable (1) QuickReference (1) Reports (1) Retrieve (1) Role Hierarchy (1) SFDX (1) Salesforce Optimizer (1) Schedule (1) Session (1) Sharing Rule (1) Sharing Sets (1) Site (1) Skills (1) Snap-ins (1) Spring 17 (1) Summer14 (1) Summer16 (1) Summer19 (1) Switch (1) SystemModStamp (1) User License (1) Users (1) Webservice (1) Winter'15 (1) Winter'17 (1) access (1) actionFunction (1) actionPoller (1) actionRegion (1) actionSupport (1) agile (1) app (1) approval process (1) aura (1) awesome (1) backup (1) bitbucket (1) book (1) campaign (1) change set (1) code (1) code coverage (1) configuration (1) csv (1) custom button (1) custom settings (1) customization (1) data loader (1) database (1) delegate Admin (1) describe (1) dom (1) dreamforce (1) duplicate (1) dynamic (1) equals (1) error (1) field-level security (1) folder (1) ftp (1) generic (1) gift (1) global describe (1) hashcode (1) import wizard (1) jenkins (1) keynote (1) long running requests (1) monitoring (1) mysql (1) page layout (1) personal (1) power of one (1) record type (1) relationship (1) request (1) review (1) sub-tab (1) tab (1) username (1) visual workflow (1) workflow (1)

Blog Archive

Total Subscribers

Total Pageviews