Salesforce Docs Portal

Using JavaScript Libraries with Visualforce

You can include JavaScript libraries in your Visualforce pages to take advantage of functionality provided by these libraries. The best way to include JavaScript libraries is by creating a static resource, and then including the library by adding an <apex:includeScript> component to your page.

For example, if you are using jQuery (https://js.foundation/), create a static resource from the library called jquery, and then reference it in a page like this:

<!-- otherprops: resourceName=jquery --> 
<apex:page>
    <apex:includeScript value="{!$Resource.jquery}"/>
</apex:page>

You can then use it in a page by adding a <script> to call functions from the library.

If you’re using a JavaScript library in a Visualforce page, and that library defines $ as a special character, you’ll need to modify your JavaScript to override this usage. For example, with jQuery you can override the definition of $ by using the jQuery.noConflict() function.

<!-- otherprops: resourceName=jquery apex_page --> 
<apex:page >
<apex:includeScript value="{!$Resource.jquery}"/>
<html>
<head>
  <script>
    jQuery.noConflict();
    
    jQuery(document).ready(function() {    
        jQuery("a").click(function() {
          alert("Hello world, part 2!");
        });
    });
  </script>
</head>
...
</apex:page>

note: - The use of third-party JavaScript libraries and frameworks is supported and encouraged by Salesforce. However, Salesforce can’t help you debug your JavaScript code, except as it specifically relates to Salesforce functionality.

  • Don’t use Ext JS versions less than version 3 on pages that use Chatter components, <apex:enhancedList>, <knowledge:articleCaseToolbar>, or <knowledge:articleRendererToolbar>.