jQuery conflicting with DataTable

jQuery conflicting with DataTable

QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

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?

Answers

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    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

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    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.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    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.

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

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

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

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

    Colin

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    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.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

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

    Allan

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    Oops... Terribly sorry. Please try again.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    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?

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    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

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    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.

Sign In or Register to comment.