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.
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'
});
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:
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.
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
