How to Use jQuery Libraries Within Salesforce Lightning Components

In:

When building Lightning Components, using the HTML script markup is not supported. However, there’s an alternative that is easy to implement. Follow these step-by-step instructions to learn how to use external JavaScript or jQuery libraries within Salesforce Lightning Components.

Upload a Static Resource

Before you can use the jQuery library within your Lightning Component, you need to create a static resource for the JavaScript files.

Static resources can be uploaded as a single file or a group of files in a ZIP folder. To upload a static resource go to Setup > Custom Code > Static Resources.

Loading a Single JS File

When building Lightning Components, using the HTML script markup is not supported and will result in this error message: “script tags only allowed in templates”. The alternative way is to use ltng:require which enables you to load external JavaScript libraries.

Static resources can be included using the standard syntax: {!$Resource.yourResourceName + ‘/yourFileName.js’}.


Loading Multiple JS Files

If you have more than one JavaScript file the syntax is a bit different due to a quirk in the way $Resource is parsed in expressions.


Use the jQuery library within a component

Once the jQuery libraries are loaded on the page, to utilize the library include the afterScriptsLoaded event and place the method within your client-side controller.

Component markup


Client-side controller markup


Example

Here’s a example of using jQuery One Page Nav within a Lightning Component:

Component


Client-side controller


Questions?

Send them to me via email, send me a tweet @jennamolby, or leave a comment

Related Posts

Leave A Comment

Your email address will not be published. Required fields are marked *

About Me

Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a sales and marketing professional.

LEARN MORE

Categories
Most Commented
Popular Posts