Using a JavaScript Library 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 MooTools (http://mootools.net/), create a static resource from the library called mootools, and then reference it in a page like this:

1<apex:page>
2  <apex:includeScript value="{!$Resource.mootools}"/>
3</apex:page>

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

1swfobject.registerObject("clippy.codeblock-1", "9");<apex:page>
2  <apex:includeScript value="{!$Resource.mootools}"/>
3  <script>
4    function changeFont(input, textid) {
5      if(input.checked) $(textid).style.fontWeight = 'bold';
6      else $(textid).style.fontWeight = "normal";
7    }
8  </script>
9
10  <h1>Congratulations</h1>
11   <apex:outputPanel layout="block">
12      <label for="checkbox">Click this box to change text font:</label>
13      <input id="checkbox" type="checkbox"
14             onclick="changeFont(this,'{!$Component.thePanel}');"/>
15   </apex:outputPanel>
16<!-- This outputPanel contains the text that will be changed when the checkbox is selected. -->
17   <apex:outputPanel id="thePanel" layout="block">Change me!
18   </apex:outputPanel>
19</apex:page>

If you are 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, if you are using jQuery, you can override the definition of $ by using the jQuery.noConflict() function.

1<apex:page >
2<apex:includeScript value="{!$Resource.jquery}"/>
3<html>
4<head>
5  <script>
6    jQuery.noConflict();
7    
8    jQuery(document).ready(function() {    
9        jQuery("a").click(function() {
10          alert("Hello world, part 2!");
11        });
12    });
13</script>
14</apex:page>

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

Note

Visualforce Developer’s Guide

No Results

Using a JavaScript Library with Visualforce