Skip to main content

jQuery in Lightning components

About Us
Published by admin
10 May 2019
1587

When working with the layout of traditional HTML pages, jQuery is used everywhere. This library significantly simplifies the work with JavaScript. It results in the optimization of many traditional approaches to interact with a page. The usage of jQuery contributes to the reduction of the code amount and also increases the overall page performance. The library also provides support for older browsers. These features make jQuery very popular among developers, including those ones who work with Salesforce. Moreover, due to its great popularity, the Internet provides a great amount of ready-made solutions and implementations based on jQuery.

In our blog, we discuss main jQuery usage aspects within Lightning components, in particular, its compatibility with the Lightning Locker Service.

jQuery makes it easier to work with a fast and feature-rich JavaScript library. It can be very helpful in the most common scenarios of interaction with an HTML page: access and manipulate the attributes and contents of DOM elements, work with events and CSS animation.

As a Salesforce user, you are surely interested in the compatibility of jQuery with Lightning framework, especially with Lightning  Locker Service.

We can’t use online JavaScript libraries in Lightning components, but we can enable jQuery as a Static Resource by the tag ltng:require:

<ltng:require scripts="{!$Resource.jquery331min}" afterScriptsLoaded="{!c.jqueryRun}"/>

Let's try to use common jQuery selectors on the simple Lightning component to check how  Lightning Locker Service works with the jQuery.

1

QueryTesting.cmp

<aura:component description="jQueryTesting">
   <ltng:require scripts="{! $Resource.jquery331min} " afterScriptsLoaded="{! c.jqueryRun }"/>
   <p>First paragraph</p>
   <p>Second paragraph</p>
   <lightning:button label="Click me" variant="brand" onclick="{! c.buttonHandler }"/>
</aura:component>

 

jQueryTestingController.js:

({
   jqueryRun: function (component, event, helper) {
       $("document").ready(function(){
           console.log('ready is run ');
       });
   },

   buttonHandler: function (component, event, helper) {
      console.log('button is pressed');
       var $firstP = $("p:first").text();

       var $lastP = $("p:last").text();    

       console.log('p: ',firstP);       //input: “p: Hello, I'm here!”
       console.log('p: ',lastP);           //input: “p: Second paragraph”
   },
})

As you can see, jQuery gets information from page and selectors work perfectly as well as simple functions like “hide()”.

Now add a couple of new elements:

<aura:attribute name="inputValue" type="String"/>
  <p class="slds-m-around--small">{! 'inputValue: ' + inputValue}</p>
  <input title="Just input" value="{! v.inputValue}"/>
   <lightning:input label="lightning input" value="{! v.inputValue}"/>

And try to change attributes of HTML tags by the method “attr()”.

$(input).attr({
           placeholder: 'Please enter the valid value'
       });

jQuery-in-salesforce-lightning-components

For the “Input” component this function works well, but if you try to change an attribute of “lightning: input” this logic will not work.

jQuery doesn’t support Lightning components. For sure, in the last case, you can use a standard button with appropriate SLDS (Salesforce Lightning Design System) styles, but using the lightning components is a proper approach.

In Visualforce, jQuery Data Tables plugin is considered popular, as it allows creating informative data tables by one row of code.

Let's try how it will work in Lightning. First, create the new static resource with Data Table jQuery Plugin, and add it in our ltng:require tag:

<ltng:require styles="{! $Resource.datatable + '/DataTables-1.10.16/media/css/jquery.dataTables.min.css'}"

scripts="{!join(',',  $Resource.jquery331min ,                         $Resource.datatable + '/DataTables-1.10.16/media/js/jquery.dataTables.min.js')
                          }"

afterScriptsLoaded="{!c.jqueryRun}"/>

Next, modify our page to provide a loading list of Accounts. Create Apex class jQueryTestingController:

public with sharing class jQueryTestingController {

    @AuraEnabled
    public static List<Account> getAccounts() {
        List<Account> accounts = [
                SELECT  Id,
                        Name,
                        CreatedDate,
                        Type
                FROM    Account
        ];
        return accounts;
    }
}

And add a simple init method in our controller:

init: function (component, event, helper) {

       var action = component.get('c.getAccounts');
       action.setCallback(this, $A.getCallback(function (response) {
           var state = response.getState();
           if (state === "SUCCESS") {
               component.set("v.accounts",  response.getReturnValue());
           }
           else if (state === "INCOMPLETE") {
               console.log('Status incomplete');
           }
           else if (state === "ERROR") {
               var errors = response.getError();
               if (errors) {
                   if (errors.length > 0) {
                       for (var i = 0; i < errors.length; i++) {
                           if (errors[0].pageErrors) {
                               if (errors[0].pageErrors.length > 0) {
                                   for (var j = 0; j < errors[i].pageErrors.length; j++) {
                                       console.log('Internal server error: ' + errors[i].pageErrors[j].message);
                                   }
                               }
                           }
                           console.log(errors[i].message);
                       }
                   }
               }
               else {
                   console.log('Internal server error');
               }
           }
       }));
       $A.enqueueAction(action);
   },

Now, let's modify our page. Add simple HTML page with our Accounts:

<table id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" cellspacing="0" width="100%">

           <thead>
           <tr>
               <th>Name</th>
               <th>Type</th>
               <th>Created Date</th>
           </tr>
           </thead>
           <tbody>
           <aura:iteration items="{!v.accounts}" var="acc">
               <tr>
                   <td>{!acc.Name}</td>
                   <td>{!acc.Type}</td>
                   <td>{!acc.CreatedDate}</td>
               </tr>
           </aura:iteration>
           </tbody>
       </table>

Reload the page and see the usual non-complex SLDS table:

jQuery

How about adding more functionality? Time to use our new plugin.

To modify this table we need the following function:

 $('#tableId').DataTable();

Reload the page and enjoy the new powerful data table with searching, sorting, and pagination.

jQuery

All the features of our table work great.

Looks like helpful, but don't forget about the main issue of jQuery in Lightning: the library uses deprecated approaches to interact with DOM. If you gonna use your Lightning component in the managed package avoid jQuery in a component controller and helper.

To avoid issues with security review you should use jQuery only in the component renderer.

Still have questions? Contact JET BI experts


Julia Solomenko
Senior Project Manager
Question to the expert

We have available resources to start working on your project within 5 business days

1 UX Designer

1 Admin

2 QA engineers

1 Consultant

Related Articles
All articles
Salesforce
IoT
Native IT Service Management solution for Salesforce®
There are numerous ITSM options on the market, the most prominent of which are: Freshservice, ServiceNow, BMC Remedy, SolarWinds Service Desk, and so on. They are all outside of the Salesforce system, necessitate additional user training, and have the potential to complicate the business process. As a result, many Salesforce clients seek native ITSM Salesforce solutions to consolidate all processes on a single platform. This was a project for our group.
20 September 2022
7 reasons Why you should attend Dreamforce 2022
Have you ever wanted to be a part of a big community of like-minded people united by common goals, and values, passionate about learning new things, making friends, sharing experiences and simply having fun? We bet you have. That is what Dreamforce is about! We get that it may not be physically that easy to attend the event but it may be as hard to have enough spare time and motivation to watch it online. Here are 7 reasons why you should become a part of the biggest Salesforce event of the year.
20 September 2022
10 Effective ways to upsell Salesforce® to existing customers
When many companies look to increase their revenue, it's important to work with your most valuable potential market: your current customers. Given that acquiring a new customer costs 5 to 25 times more than retaining a current one, working on upselling and cross-selling is a much more profitable way to grow your business.
01 September 2022