Include JQuery in LWC (Lightning Web Component)

In this post, we will implement the functionality to include JQuery in LWC (Lightning Web Component). We can use Custom CSS and SLDS in Lightning Web Component, but sometimes it is useful to include JQuery in LWC to implement the modern UI and using less code. There are so many methods implemented in the JQuery Library that we can make use of. Let’s hop into the implementation.

Implementation

In this implementation, we will include JQuery in LWC (Lightning Web Component) and add little JQuery Animations.

First, create a Lightning Web Component and add the below markup to display a few boxes and text.

lwcJquery.html

<template>
    <lightning-card title="Include JQuery in LWC (Lightning Web Component) ">
        <div class="slds-m-around_medium">
            <div class="flip" onclick={slideIt}>Click Here to Slide Down or Up</div>
            <div class="panel">
                <p class="innerDiv" onclick={slideRight}>
                    JQuery in LWC
                </p>
            </div>
        </div>
    </lightning-card>
</template>

Then, the first thing that we need to do is to add the JQuery JS file in the Static Resource. The Static Resource should look something like below:

Include JQuery in LWC (Lightning Web Component)

In the JS Controller, we first need to import loadScript() method from lightning/platformResourceLoader module. We can also include loadStyle method if we want to include an external CSS file.

import { loadScript, loadStyle } from 'lightning/platformResourceLoader';

Import the Static Resource that we created earlier as well. Check this implementation to include Static Resource in Lightning Web Component.

Finally, in the renderedCallback method, call loadScript that we imported earlier and pass a reference to the current template (this) and the Static Resource. This method returns the Promise. The then() function will be called if the Promise is resolved. The catch() function will be executed if there is an error. We are using renderedCallback as we want to load the Scripts once the component is loaded and rendered on UI.

Now, to access the JQuery method in Lightning Web Component, there is some catch. Ideally, there are multiple ways to call JQuery methods. The most common one is below:

$(".className").hide();

This will hide the element with class=”className”. But in Lightning Web Component, we must use it like below:

$(this.template.querySelector('.className')).hide();

That is all. We just need to reference the elements using queryLocator. Then, we can call the JQuery methods.

lwcJquery.js

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import jQuery from '@salesforce/resourceUrl/JQuery';

export default class LwcJquery extends LightningElement {

    renderedCallback(){
        loadScript(this, jQuery)
        .then(() => {
            console.log('JQuery loaded.');
        })
        .catch(error=>{
            console.log('Failed to load the JQuery : ' +error);
        });
    }

    slideIt(event){
        $(this.template.querySelector('.panel')).slideToggle("slow");
    }

    slideRight(event){
        $(this.template.querySelector('.innerDiv')).animate({left: '275px'});
    }
}

Here, I have used slideToggle() and animate() JQuery methods to add some animation.

Below is the CSS that will make this look beautiful.

lwcJquery.css

.panel, .flip {
    padding: 5px;
    text-align: center;
    background-color: #427ddb;
    border: solid 1px #2d2c33;
    color: white;
    cursor: pointer;
}
  
.panel {
    padding: 50px;
    display: none;
}

.innerDiv {
    position: absolute;
}

This is how we can include JQuery in LWC (Lightning Web Component).

Please Subscribe here, if you don’t want to miss new implementations. If you want to check more implementations using Lightning Web Component, you can check it here.

You can check official JQuery documentation here.