Uncaught TypeError: Cannot read properties of undefined (reading 'style') when using language:url

Uncaught TypeError: Cannot read properties of undefined (reading 'style') when using language:url

wsteven24wsteven24 Posts: 1Questions: 1Answers: 0
edited September 2022 in Free community support

Hello! I have an error sometimes when datatables loads with language:url. This is my code:

var tbDocumentDetails = $('#tbDocumentDetails').DataTable({
    scrollX: true,
  searching: false,
  info: false,
  language: { url: 'https://cdn.datatables.net/plug-ins/1.12.1/i18n/es-ES.json' },
  columnDefs: [{ targets: '_all', createdCell: function (td, cellData, rowData, row, col) { $(td).css('padding', '0') } }]
});

$(document).ready(function () {
  tbDocumentDetails.column(2).visible(false);
});

Link to test case: https://jsfiddle.net/thsL8az3
Error messages shown:
Uncaught TypeError: Cannot read properties of undefined (reading 'style')
at Ja (jquery.dataTables.min.js:69:475)
at sa (jquery.dataTables.min.js:29:479)
at B.<anonymous> (jquery.dataTables.min.js:151:438)
at B.iterator (jquery.dataTables.min.js:122:423)
at B.<anonymous> (jquery.dataTables.min.js:151:409)
at Function.adjust (jquery.dataTables.min.js:125:349)
at B.<anonymous> (jquery.dataTables.min.js:151:208)
at B.iterator (jquery.dataTables.min.js:122:423)
at B.<anonymous> (jquery.dataTables.min.js:150:483)
at B.<anonymous> (jquery.dataTables.min.js:127:131)
Description of problem:
The error happens sometimes... and always in the line tbDocumentDetails.column(2).visible(false); If I change language:{url: ''} by the language object (no ajax) it works propoerly.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

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

    Thanks for the test case, but it doesn't run and demonstrate the issue - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • allanallan Posts: 62,099Questions: 1Answers: 10,183 Site admin

    Also check the language.ajax option's docs which note that using that option makes the initialisation of the DataTable async. So if the file is cached, it might work, but if not and there is a slow network, it might not.

    Use initComplete or init to know when the DataTable is ready.

    Allan

  • TablefakTablefak Posts: 33Questions: 7Answers: 0
    edited May 2023

    I'm having the same issue, but I don't think I can rely on the "init" event in my case.

    Here's my test case:
    https://live.datatables.net/hutoxepu/1/

    I want to load my data asynchronously, so when I initialize the datatable, I pass an empty array as "data". An empty table is then drawn. Later on, when my data has been loaded, I add it to the table. Also, I want to select some rows as soon as the data arrives, so that they appear selected when the user first sees the data in the table. Sometimes the data is available immediately though (e.g. it has already been loaded and cached). I assume that in this case I'm trying to select the rows before the table is fully initialised (the "language" isn't downloaded yet), and that's why this error happens.

    As I said, I can't use the "init" event as it fires on the very first table draw (when the table is empty), and my data may not be available just yet.

    As far as I understand, I need to do the rows selection after both my data has been loaded and the table has been initialized. While I could implement this logic in this straightforward way, I'm hoping it can be done easier.

  • kthorngrenkthorngren Posts: 20,474Questions: 26Answers: 4,804
    edited May 2023

    @Tablefak

    Try placing your setTimeout() function in intComplete or init. This way the function doesn't start until the language.url is complete. See the note in the docs:

    Note that when this parameter is set, DataTables' initialisation will be asynchronous due to the Ajax data load. That is to say that the table will not be drawn until the Ajax request has completed. As such, any actions that require the table to have completed its initialisation should be placed into the initComplete callback.

    If you still need help please update the test case so it runs and shows the issue. Look at the browser's console, you have a syntax error on this statement:

    for (var i = 0; i <; i++) {
    

    Kevin

  • TablefakTablefak Posts: 33Questions: 7Answers: 0

    Hi, Kevin.

    Yes, that's exactly what I did, and it's working fine. Thanks a lot.

Sign In or Register to comment.