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.
