Categories

Getting Started

Learn through 101 guides and easy solutions.

How to Use jQuery Libraries Within Salesforce Lightning Components

How to Use jQuery Libraries Within Salesforce Lightning Components

min. reading

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.

<aura:component>
    <ltng:require scripts="{!$Resource.yourResourceName + '/yourFileName.js'}" />
</aura:component>

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.

<aura:component>
<ltng:require scripts="{!join(',',
    $Resource.yourResourceName + '/yourFileName1.js',
    $Resource.yourResourceName + '/yourFileName2.js')}" />
</aura:component>

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

<aura:component>
    <ltng:require scripts="{!$Resource.yourResourceName + '/yourFileName.js'}" afterScriptsLoaded="{!c.doInit}" />
</aura:component>

Client-side controller markup

({
 
  doInit : function(component, event, helper) {
        
      jQuery("document").ready(function(){
          console.log('loaded');
          
      });
        
}
})

Example

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

Component

<aura:component>
   <ltng:require scripts="{!join(',',
    $Resource.myLightingComponent + '/jquery-3.3.1.min.js',
    $Resource.myLightingComponent+ '/jquery.nav.js')}" afterScriptsLoaded="{!c.doInit}"/>
</aura:component>

Client-side controller

({
 
  doInit : function(component, event, helper) {
        
      jQuery("document").ready(function(){
          $('#cmp-nav').onePageNav({
              scrollSpeed: 750,
scrollThreshold: 0.5,
filter: '',
easing: 'swing',  
          });
          
      });
        
}
})

Questions?

Send me a tweet @jennamolby, or contact the Sercante team for help.

Subscribe to The Spot

Hidden
Hidden
Hidden
Hidden

Categories

Top 3 Recent Post

  • Jenna is a Marketing Operations leader with over 10 years of experience working with both enterprise organizations and start-ups. She started her career as a consultant, helping B2B and B2C clients get the most out of Marketo, Pardot, Marketing Cloud and Salesforce. She then moved in-house, working with B2B SaaS companies, helping them build their sales and marketing technology stacks and processes from scratch.

Leave Your Comment

Related Articles

Bot Single Post