March 17, 2016
Back to Blog
Created by: Stewart Baker, Western Oregon University
System components: PBO
Mobile support: Refer to the “Mobile Support” section of each Primo Toolkit element’s documentation.
Including the JQuery library
- Compression - JQuery comes in a compressed and uncompressed version. The uncompressed version is recommended for use in testing and debugging code, while the compressed version is better for production environments—that is, for websites that are able to be accessed by members of the general public. For pre-built Primo Toolkit elements, you will usually want the compressed JQuery, as it reduces load time. If you are building your own JQuery scripts, however, you may wish to use the uncompressed version for testing the code.
- There are two main “lines” of JQuery: 1.x and 2.x. The only substantial difference between the lines is that 2.x does not support versions of Internet Explorer prior to IE 9. Because of this, the official JQuery documentation suggests using JQuery 1.x “unless you are certain no IE 6/7/8 users are visiting the site.”
Below is a table showing these differences.
|JQuery 1.x (compressed)||Production||All browsers|
|JQuery 1.x (uncompressed)||Testing||All browsers|
|JQuery 2.x (compressed)||Production||IE 6/7/8 not supported|
|JQuery 2.x (uncompressed)||Testing||IE 6/7/8 not supported|
If none of this makes sense and you just want to know which version to use in your live Primo, the safest bet is JQuery 1.x (compressed). Some Primo Toolkit elements may also specify which version of JQuery to use.
There are several ways to include the JQuery library in a page. The simplest is to load it from a CDN, a kind of remote code repository. The official JQuery documentation contains links to several CDNs, including one hosted by the JQuery.com site itself.
Code Snippets you can copy and paste for each version of JQuery are included below.
JQuery 1.x (compressed): <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
JQuery 1.x (uncompressed): <script src="//code.jquery.com/jquery-1.11.3.js"></script>
JQuery 2.x (compressed): <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
JQuery 2.x (uncompressed): <script src="//code.jquery.com/jquery-2.1.4.js"></script>
- Option 1: The Footer
- Option 2: The Header
- Option 3: In a Separate File
where VID is the name your Primo view and scriptname.js is the name of your script.