Datatable - JS-integration problems #2172

SergejGleithmann · 2023-11-24T18:35:57Z

SergejGleithmann
Nov 24, 2023

Hello,
I have the following problem:
I tried to set up a datattabel via JS as described here: https://tw-elements.com/docs/standard/data/datatables/#async-data
However JS refuses to use the constructor of the Datatable, so

const asyncTable = new te.Datatable(
        document.getElementById('datatable'),
        { columns, },
        { loading: true }
    );

results in Uncaught TypeError: 'querySelector' called on an object that does not implement interface Element..

Can someone help me? What am I missing?

Edit: Without changing anything I sometimes also get either this: Uncaught TypeError: te.Datatable is not a constructor and Uncaught TypeError: i is null. While the first error points to my use of the Datatable constructor, the second one points to the template.js-File in the Datepicker-implementation of TW-Elements (yes not Datatable).

Answered by SergejGleithmann

Jan 10, 2024

tl;dr: The tw-elements.umd.min.js script-tag needs to be of type text/javascript, but additional scripts need to be of type module. This way te (and all the TWE features) is available, when the additional script runs.

Hi @iprzybysz,
thank you for your response. It put me on the right track.

As @juujisai proposed earlier the type-attribute was the problem. However, in my case I needed my js code (the code in the home.html file) to be of type module - not the Tailwind-JS file.

Thank you all for your help!

View full answer

juujisai · 2023-11-27T06:35:14Z

juujisai
Nov 27, 2023
Maintainer

Hello! I cannot reproduce those errors on my vanilla JS app with vite. Does the issue occur with the code from our Async Data example or is it your own code? https://tw-elements.com/docs/standard/data/datatables/#async-data

What stack are you using? Have you tried to use Datatable instead of te.Datatable ? Maybe your app is using the ES version of TW Elements

8 replies

juujisai Dec 11, 2023
Maintainer

What if we change the type here from type="text/javascript" to type="module" ? I still think the issue is with the time the files load. We had similar issue with our documentation, adding those types helped in our case.

<script src="{% static 'tw-elements/dist/js/tw-elements.umd.min.js' %}"
        type="module"></script>

SergejGleithmann Jan 8, 2024
Author

@juujisai Thanks for the reply, sorry for my late response. Sadly changing the type does not change the behaviour, but I also think, that it has to do with the timing, because te exists if the page is loaded.

iprzybysz Jan 9, 2024
Maintainer

Hi @SergejGleithmann,

firstly try changing the time of loading your scripts to module.

<script type="module">
const lang = "{{ LANGUAGE_CODE }}";
...

If this doesn't help, you can try out the DOMContentLoaded event and when a document is fully loaded, initialise the Datatable component. You can also check the import order in the base.html file. I recommend you check our Django Integration tutorial and make sure you've done everything right.

I've created a new Django App based on the Django Integration tutorial and everything works for me. Here is my code - maybe it'll also help you with debugging your code:

base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="{% static 'output.css' %}" rel="stylesheet" />
    <title>
      {% block head_title %}TWE Django Integration Tutorial{% endblock %}
    </title>
  </head>
  <body>
    <div>{% block content %} {% endblock %}</div>
    <script
      src="{% static 'tw-elements/dist/js/tw-elements.umd.min.js' %}"
      type="text/javascript"
    ></script>
  </body>
</html>

home.html

{% extends "base.html" %} {% load static %} {% block content %}
<div id="datatable"></div>

<script type="module">
  const basicData = {
    columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
    rows: [
      ["Tiger Nixon", "System Architect", "Edinburgh", "61", "2011/04/25", "$320,800"],
      ["Garrett Winters", "Accountant", "Tokyo", "63", "2011/07/25", "$170,750"],
      ["Ashton Cox", "Junior Technical Author", "San Francisco", "66", "2009/01/12", "$86,000"],
      ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "22", "2012/03/29", "$433,060"],
      ["Airi Satou", "Accountant", "Tokyo", "33", "2008/11/28", "$162,700"],
      ["Brielle Williamson", "Integration Specialist", "New York", "61", "2012/12/02", "$372,000"],
      ["Herrod Chandler", "Sales Assistant", "San Francisco", "59", "2012/08/06", "$137,500"],
      ["Rhona Davidson", "Integration Specialist", "Tokyo", "55", "2010/10/14", "$327,900"],
      ["Colleen Hurst", "Javascript Developer", "San Francisco", "39", "2009/09/15", "$205,500"],
      ["Sonya Frost", "Software Engineer", "Edinburgh", "23", "2008/12/13", "$103,600"],
      ["Jena Gaines", "Office Manager", "London", "30", "2008/12/19", "$90,560"],
      ["Quinn Flynn", "Support Lead", "Edinburgh", "22", "2013/03/03", "$342,000"],
      ["Charde Marshall", "Regional Director", "San Francisco", "36", "2008/10/16", "$470,600"],
      ["Haley Kennedy", "Senior Marketing Designer", "London", "43", "2012/12/18", "$313,500"]
    ],
  };

  new te.Datatable(document.getElementById("datatable"), basicData);
</script>
{% endblock %}

SergejGleithmann Jan 10, 2024
Author

tl;dr: The tw-elements.umd.min.js script-tag needs to be of type text/javascript, but additional scripts need to be of type module. This way te (and all the TWE features) is available, when the additional script runs.

Hi @iprzybysz,
thank you for your response. It put me on the right track.

As @juujisai proposed earlier the type-attribute was the problem. However, in my case I needed my js code (the code in the home.html file) to be of type module - not the Tailwind-JS file.

Thank you all for your help!

Answer selected by SergejGleithmann

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Datatable - JS-integration problems #2172

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 8 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Datatable - JS-integration problems #2172

SergejGleithmann Nov 24, 2023

Replies: 1 comment · 8 replies

juujisai Nov 27, 2023 Maintainer

juujisai Dec 11, 2023 Maintainer

SergejGleithmann Jan 8, 2024 Author

iprzybysz Jan 9, 2024 Maintainer

SergejGleithmann Jan 10, 2024 Author

SergejGleithmann
Nov 24, 2023

Replies: 1 comment 8 replies

juujisai
Nov 27, 2023
Maintainer

juujisai Dec 11, 2023
Maintainer

SergejGleithmann Jan 8, 2024
Author

iprzybysz Jan 9, 2024
Maintainer

SergejGleithmann Jan 10, 2024
Author