0

Below is my JavaScript Code::

import { LightningElement, track, api, wire } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader'
import getAllOpps from '@salesforce/apex/jQueryDataTableController.fetchOpportunity';
import datatable from '@salesforce/resourceUrl/datatable';
import jQuery from '@salesforce/resourceUrl/jquery224';

export default class Datatable extends LightningElement {

    @track data;
    @track error;
    @wire(getAllOpps)
    wiredOpps({error,data}) {

            //console.log('I am here1::' + data);
            if(data){
            this.data = data;

            /*if (window.jQuery)
            {
                alert('jQuery is loaded');
            }
            else
            {
                alert('jQuery is not loaded');
            }*/
            /*setTimeout(function(){ 
                //window.jQuery(this.template.querySelector('.slds-table')).attr("style", "background-color:green");
                //window.jQuery(this.template.querySelector('.slds-table')).DataTable();
                //console.log('Within Timeout!!');
                //this.template.querySelector('#tableId').datatable.DataTable();
                //const table = this.template.querySelector('#tableId');
                //$(table).DataTable();
                //$('#tableId').DataTable();
                //this.template.querySelector('#tableId').DataTable();
                // add lightning class to search filter field with some bottom margin..  
                //$('div.dataTables_filter input').addClass('slds-input');
                //$('div.dataTables_filter input').css("marginBottom", "10px");
            }, 500); */

            //console.log(data);
            //console.log('I am here!!' +JSON.stringify(this.data));
            //console.log(JSON.stringify(data, null, '\t'));
        } else if (error) {
            this.error = error;
            console.log('error::' + JSON.stringify(this.error));
        }
    }

    renderedCallback() {
        console.log('renderedCallback ... Start');

        if (window.jQuery)
            {
                //let value = window.jQuery(this.template.querySelector('.testid')).attr('id');
                //let value = window.jQuery(this.template.querySelector('.testid')).attr("style", "background-color:green");

                window.jQuery(this.template.querySelector('.slds-table')).DataTable({
                    data:this.data
                }

                );
                //window.jQuery(this.template.querySelector('.slds-table')).attr("style", "background-color:green");//.DataTable(); // <div>First</div>
                //window.jQuery(this.template.querySelector('.slds-table_bordered')).DataTable(); // <div>First</div>

                //console.log('value : '+value);
                //alert('jQuery is loaded');
                //alert("Value: " + $("#testid").val());
                //$("#testid").val("Dolly Duck");
                //$(".testid").attr("style", "background-color:green");
            }
            else
            {
                alert('jQuery is not loaded');
            }

        //$(".testid").attr("style", "background-color:green");
        console.log('renderedCallback ... End');
    }
    connectedCallback() {
        console.log('connected callback!!');
        loadScript(this, jQuery);
        //loadStyle(this,datatable+'/DataTables-1.10.16/media/css/jquery.dataTables.min.css');
        //loadScript(this,datatable+'/DataTables-1.10.16/media/js/jquery.dataTables.min.js');
        Promise.all([
            loadScript(this, jQuery),
            loadStyle(this,datatable+'/DataTables-1.10.16/media/css/jquery.dataTables.min.css'),
            loadScript(this,datatable+'/DataTables-1.10.16/media/js/jquery.dataTables.min.js')
        ])

        .then(() => {
            if (window.jQuery)
            {
                alert('jQuery is loaded connected callback!!');
                //let value = window.jQuery(this.template.querySelector('#tableId')).attr("style", "background-color:green");
                //window.jQuery(this.template.querySelector('#tableId')).DataTable();
            }
            else
            {
                alert('jQuery is not loaded connected callback!!');
            }
            alert('Files loaded.');
        })
        .catch(error => {
            console.log('Error::' + JSON.stringify(error));
            alert(error.body.message);
        });
        if (window.jQuery)
        {
            alert('jQuery is loaded connected callback!!');
        }
        else
        {
            alert('jQuery is not loaded connected callback!!');
        }
        console.log('Connected CallBack1');
    }

}

My HTML Code is as follows:

<template>
    <div class="slds-m-around_medium">  
        <table id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" style="width:100%" >
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Stage</th>
                    <th>Amount</th>
                    <th>Close Date</th>
                </tr>
            </thead>
            <tbody>
                <template for:each={data} for:item='acc'>
                    <tr key={acc.id}>
                        <td>{acc.Id}</td>
                        <td>{acc.Name}</td>
                        <td>{acc.Type}</td>
                        <td>{acc.StageName}</td>
                        <td>{acc.Amount}</td>
                        <td>{acc.CloseDate}</td>
                    </tr>
                </template>  
            </tbody>
        </table>
    </div>
</template>

I am getting the following error::

Uncaught (in promise) TypeError: Cannot read property 'style' of undefined
    at Ea (jquery.dataTables.min.js:62)
    at ga (jquery.dataTables.min.js:48)
    at e (jquery.dataTables.min.js:92)
    at Proxy.eval (jquery.dataTables.min.js:92)
    at Function.each (jquery224:2)
    at n.fn.init.each (jquery224:2)
    at n.fn.init.m [as dataTable] (jquery.dataTables.min.js:82)
    at n.fn.init.h.fn.DataTable (jquery.dataTables.min.js:164)
    at s.renderedCallback (amnTable.js:4)
    at callHook (aura_prod.js:29)

How do I resolve it?

2 Answers 2

1

You can't mix jQuery DOM operations with LWC. If you want to use jQuery data tables, you must use a root element marked as lwc:dom="manual", and then fully construct the contents of this table using JavaScript. It is possible to do this, but you'll probably find it much easier to simply use lightning-datatable instead. It provides much of the functionality of jQuery's DataTable in native LWC.

2
  • Did you fix using lwc:dom="manual"? I started seeing jQuery data table broken in Summer 2020 but I was wondering if we can still get away with this fix while rewriting with lwc datatable. Jun 6, 2020 at 2:13
  • @ShinyaKoizumi I haven't used jQuery in Lightning at all, though most of my components so far have been relatively trivial. I haven't heard of jQuery breaking in the latest release. You may want to ask a new question with some sample code that demonstrates how it's broken, perhaps we can help.
    – sfdcfox
    Jun 6, 2020 at 11:13
1

Do not use jQuery in a Lightning Web Component.

LWCs work in a Shadow DOM. JQuery doesn't work inside of Shadow DOM because typically it is trying to query for something starting at the document level and the shadow root blocks this.

If you are trying to access DOM objects, check out the documentation Here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .