jQuery conflicting with DataTable

QuesnelJ

I'm getting the errors in the attached picture (disregard the 404, that will be an easy fix).

I'm using jQuery v3.6.4 and DataTables V1.11.3

My dataTables definition is:

$(document).ready(function ()
    {
        $('#schedCheckedDataTableDef').DataTable (
            {
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                order: []   /* No ordering applied by DataTables during initialisation */
            });
    });

my table definition is:

<table id="schedCheckedDataTableDef" class="display cell-border compact table-striped">
<thead><tr><th scope="col">Schedule viewed on</th></tr></thead>
<tbody><tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
</tr></tbody></table>

I'm also using the March 2023 version of the WET4 template.

Being a back end guy, I'm a bit lost. Does anyone one know how to debug this?

colin

It looks like an error in wet-boew.js, that's nothing to do with DataTables I'm afraid. I'd suggest posting in StackOverflow or on the forum for that plugin.

Colin

QuesnelJ

Thanks Colin for getting back to me.

I'd agree with you, however I'm using wet-boew.js (the template) everywhere in my project and only getting the error on pages with dataTables.

allan

I can take a look into it if you give me a link to a page showing the problem. At the moment there isn't much to debug

Allan

QuesnelJ

I understand and appreciate your offer.

I have created two test pages for you. They can be found here: https://jacquesquesnel.myds.me:901/EmployeeKeeper/test/index-en.php

Again thanks a bunch Allan.

QuesnelJ

I'm not sure my SSL is working correctly. You might want to try : http://jacquesquesnel.myds.me:900/EmployeeKeeper/test/index-en.php

colin

Thanks for the link. That goes to en Employee Keeper page - where should we navigate to after that?

Colin

QuesnelJ

I'm glad you were able to access the test pages.

The link just brings you to a page showing you that there are no errors if dataTables is not used. If you click on the link labeled "This link", you will see a page with dataTables, and that page generates an error.

allan

Clicking "This link" takes me to a login page?

Allan

QuesnelJ

Oops... Terribly sorry. Please try again.

allan

Looks like the issue is that:

$document.on( "init.dt", function( event ) {

is being triggered before the i18nText variable is being set in the init function of wet-boew.js.

That looks to be happening at:

// Bind the init event of the plugin
$document.on( "timerpoke.wb " + initEvent, selector, init );

So yes, I'm afraid this isn't a DataTables issue. It looks like it is an event ordering on. init needs to run before the $document.on( "init.dt", function( event ) { event.

Perhaps your DataTable initialisation should be delayed until after timerpoke.wb, whatever that is?

Allan

QuesnelJ

Thanks for looking at this Allan.

I'm afraid you lost me at "Hello". I'm assuming that as this is not a DataTables issue, you can not help me further?

colin

Perhaps your DataTable initialisation should be delayed until after timerpoke.wb, whatever that is?

It's not a DataTables issue, but Allan suggested ways to circumvent the issue. If that's your file, you could initialise DataTables after that. Or use setTimeout to delay the initialisation perhaps.

Colin

QuesnelJ

Yes, I know that he meant it was not a Datatables issue. I'm just not sure how to change the initializing issue.

allan

Probably best to speak to the developer who wrote that code. You need the i18nText variable to be set up before the init.dt event occurs (since it is using i18nText in that event handler).

But init-dt is happening first - which suggests that the DataTable is being intialised before whatever is triggering timerpoke.wb.

Perhaps the issue is that timerpoke.wb is too late. But without going through all of the code, I'm not certain what the correct sequence of events should be.

Allan

QuesnelJ

Thank you very much to Allan and Collin for taking your time to investigate this for me. I know your time is precious and I very much appreciate everything.

We'll consider this case closed.

Thanks again for everything.