function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Niraj Singh 28Niraj Singh 28 

jquery in lightning component

Hi,
I am feeling more comfort in coding jquery insted javascript can i do in lightning component if then please do me clear how can import jquery api from static resources.


Thanks and Happy new year in Advance
Khan AnasKhan Anas (Salesforce Developers) 
Hi Niraj,

I trust you are doing splendidly and enjoying the season.

In order to use the jQuery plugin, you must include the jQuery and JavaScript file on your Lightning Component via static resources.

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

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

Please refer to the below links which might help you further with the above requirement.

https://jennamolby.com/how-to-use-jquery-libraries-within-salesforce-lightning-components/

https://rajvakati.com/2018/05/29/using-jquery-in-lightning-components/

http://sfdcmonkey.com/2018/03/13/jquery-datatable-salesforce-lightning-component/

http://bobbuzzard.blogspot.com/2015/06/lightning-components-and-unobtrusive.html

https://gist.github.com/douglascayers/27941e99b0c18e9eb002775f5b9e4aab

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Wish you a very Happy New Year in advance :)

Thanks and Regards,
Khan Anas
Raj VakatiRaj Vakati
Refer this link

https://rajvakati.com/2018/05/29/using-jquery-in-lightning-components/

Step 1: download Jquery javascript file
download the jquery latest version from the https://jquery.com/download/ .

  
<aura:component >
    <ltng:require scripts="{!$Resource.jQueryv3}"
                  afterScriptsLoaded="{!c.loadJquery}" />
    
    <aura:attribute name="text" type="String" default="" />
    
    <textarea id="textareaChars" maxlength="100" value="{!v.text}"></textarea> <br/>
    
    <span id="chars">100</span> characters remaining   
    
</aura:component>
  
({
    loadJquery : function(component, event, helper) {
        jQuery(document).ready(function(){
            var maxLength = 100;
            $('textarea').keyup(function() {
                var length = $(this).val().length;
                var length = maxLength-length;
                $('#chars').text(length);
            });
        });
    }
})