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.
|
1 2 3 |
<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.
|
1 2 3 4 5 |
<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
|
1 2 3 |
<aura:component> <ltng:require scripts="{!$Resource.yourResourceName + '/yourFileName.js'}" afterScriptsLoaded="{!c.doInit}" /> </aura:component> |
Client-side controller markup
|
1 2 3 4 5 6 7 8 9 10 11 |
({ 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
|
1 2 3 4 5 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
({ doInit : function(component, event, helper) { jQuery("document").ready(function(){ $('#cmp-nav').onePageNav({ scrollSpeed: 750, scrollThreshold: 0.5, filter: '', easing: 'swing', }); }); } }) |
Questions?
Send them to me via email, send me a tweet @jennamolby, or leave a comment
4 comment(s)
Mirketa
Nice article, thanks for sharing
Dev
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
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
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?