I am able to load the jQuery library, but it seems that I can't call some simple jQuery function:
window.jQuery('.classText').attr('id');
I am trying to get element id by finding the element by class name. Using above script I always get undefined
. But using online playground like jsfiddle, I am able to get the element id
Here is the detail of my js and html file
ItemToApprove.js:
import { LightningElement, track } from 'lwc';
import { loadScript,loadStyle } from 'lightning/platformResourceLoader';
import jqueryPkg from '@salesforce/resourceUrl/jquerypackage';
export default class ItemToApprove extends LightningElement {
@track error;
dataTablejsInitialized = false;
renderedCallback() {
if (this.dataTablejsInitialized) {
return;
}
this.dataTablejsInitialized = true;
loadScript(this, jqueryPkg +'/jQuery-3.3.1/jquery-3.3.1.js')
.then(() => {
this.error = undefined;
//calling the jquery function
this.initializeTable();
})
.catch(error => {
this.error = error;
});
}
initializeTable() {
//always getting undefined instead of printing the element id
alert(window.jQuery('.classText').attr('id'));
}
}
ItemToApprove.html:
<template>
<lightning-card title="Item to Approve" icon-name="action:new_task">
<div class="slds-m-around_medium">
<input id="txtTest" class="classText" type="text" value="test" />
</div>
</lightning-card>
</template>
Basically I want to get the element using jQuery function by element class name. How can I achieve this in LWC?
Best Answer
If you want to use jquery (or any 3rd party JS library), it is better to pass the native lightning selector to jquery - without which there is a chance you will run into problems with any of upgrades. In your case, you can use
this.template.querySelector('.classText')
. Below code will work:Below is full code:
However, note that id will be modified at RUNTIME.
So, the id you get will be something like txtTest-101