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

  • 02/06/2020
    7 Tips for Organizing Your Campaigns in Salesforce

    Salesforce campaigns can help you track each of your marketing initiatives in detail. These can include online advertisements, emails, or more specialized marketing events such as demos and tradeshows. You can use campaigns to analyze how many leads you are generating, how much pipeline you are building, and how many deals are closing as a result of your marketing efforts. However, in order to track and analyze your campaigns effectively, you need to have an organizational structure in place. Whether you are setting up campaigns for the first time or looking for a way to get more out of campaigns, here are 7 tips to help you get started with your campaign organization.

  • 01/03/2020
    A Beginners Guide to Date Stamping in Salesforce

    Date stamping can be used in Salesforce to record the date or date/time when a particular field is changed. This is used frequently for capturing the date the lead entered a particular stage or when a lead was first actioned. These fields can be used in reports and dashboards. Let’s dive into how to set this up and some example use cases.

  • 17/12/2019
    8 Noteworthy Features in the Salesforce Spring ’20 Release

    The Salesforce Spring ’20 release is quickly approaching and soon you’ll be able to take advantage of exciting new features and functionality. Here is a recap of 8 of my favorite features in the release, assigning tasks to a queue, group permission sets, before-save updates in flows and more.

4 comment(s)
  • Mirketa

    20/11/2019 at 3:24 am
    Reply

    Nice article, thanks for sharing

  • Dev

    23/07/2018 at 2:18 am
    Reply

    Hello I have try this solution for use Jquery in salesforce LEX. but It given error. [jQuery is not defined http://prntscr.com/k9ti35 Please check it and give me respose

  • Sonam

    11/06/2018 at 5:53 am
    Reply

    What a fantastic read on Salesforce. This has helped me understand a lot in Salesforce course. Please keep sharing similar write ups on Salesforce. Guys if you are keen to know more on Salesforce, must check this wonderful Salesforce tutorial and i'm sure you will enjoy learning on Salesforce training. https://www.youtube.com/watch?v=5FTe-ah3WBU

  • Pritesh

    06/06/2018 at 2:56 am
    Reply

    I have read your blog "How to Use jQuery Libraries Within Salesforce Lightning Components" For this I have try use external js in salesforce this but I am getting Error. Uncaught TypeError: Cannot read property 'expando' of undefined throws http://prntscr.com/jriz7r Please Help me?

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 Marketing Operations leader.

Categories
Most Commented
Popular Posts