Initialization Timing and Errors While Using DataTables

[salvuccicarlos]

Hello Wappler Community,

I hope everyone is doing well. I’ve been working on integrating DataTables into my Wappler project and have encountered some issues that I’d like to discuss and hopefully resolve with your insights.

The Problem:

When I try to initialize DataTables in my application, I am encountering an error which reads:

javascriptCopy code

Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild')

Code Structure:

I have a JavaScript file ( dataTablesMain.js ) where I’ve written a function initDataTable() that takes care of initializing the DataTable. Here’s a snippet:

javascriptCopy code

function initDataTable() {
    // ... (initialization code here)
    let table = $('.dataTable').DataTable({
        // DataTable options
    });
}

This function is supposed to be triggered after my data is fully loaded (and after waiting 500ms). I’m using Wappler’s dmx-on:updated to trigger this function:

htmlCopy code

<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="queryContabilidad.data.queryMovimientosResultados" id="tableRepeatSIAC" dmx-on:updated="run([{wait:{delay:500}},{runJS:{function:'initDataTable',name:'initDataTable',outputType:'text'}}])">

Despite this, I still encounter the error, and the DataTables are not initialized as expected.

Questions:

1. Is the dmx-on:updated the best event to use for ensuring that DataTables initializes only after the table is fully populated?
2. Could the error be related to the sequence of script loading? I’ve ensured that jQuery and DataTables scripts are loaded in the correct order.
3. Are there known conflicts or issues when using DataTables with Wappler that I should be aware of?

I’m really hoping to resolve this issue and would greatly appreciate any insights or suggestions. Thank you in advance!

[salvuccicarlos]

Anyone?

[AdrianoLuiz]

This error (Uncaught TypeError: Cannot read properties of undefined (reading ‘appendChild’)) could be due to an ID error. It’s important to ensure that the HTML element where you want to apply DataTable exists and is available at the time of initialization. Make sure that the selector $(’.dataTable’) is matching the desired element.

[AdrianoLuiz]

The dmx-on:updated event is generally appropriate for initializing functions after a data update. Try using dmx-on:done; I haven’t tested it this way before, but give it a try to ensure that DataTable is initialized only after the complete page has loaded.

[salvuccicarlos]

@AdrianoLuiz

This error (Uncaught TypeError: Cannot read properties of undefined (reading ‘appendChild’)) could be due to an ID error. It’s important to ensure that the HTML element where you want to apply DataTable exists and is available at the time of initialization. Make sure that the selector $(’.dataTable’) is matching the desired element.

I've checked it out, but the error remains. I need to be sure that DataTable initialize after data is available and sometimes happens that the ServerConnect component loads more than one time when you send GET data to the API endpoint

[AdrianoLuiz]

You can create a function in JavaScript and call it after the component has loaded. You invoke the function from within the component, understand? It might work.

[franse]

@salvuccicarlos

I need to be sure that DataTable initialize after data is available

Hey Carlos,

Have you seen this post from jon?

How to use DataTables.net

I’ve used DT in the past and I am pretty sure you don’t need to destroy the table everytime the data changes. I know it doesn’t play well with reactive data and that’s a shame. A wrapper for Wappler would have to be built for that to work. Anyway, you can probably refresh your data clearing old data and adding new with something like: $('#'+tableid).DataTable().clear().rows.add(updatedData).draw();

[salvuccicarlos]

@salvuccicarlos

I’ve checked it out, but the error remains. I need to be sure that DataTable initialize after data is available and sometimes happens that the ServerConnect component loads more than one time when you send GET data to the API endpoint

Code Structure:

Here’s the dmx-serverconnect component that fetches data for my tableaAnd I’m initializing DataTables using Wappler’s dmx-on:done :

htmlCopy code

<dmx-serverconnect id="queryContabilidad" url="/api/contabilidad/query" dmx-param:edificio="selected.data.edificio_cod" dmx-param:periodo="selected.data.periodo_cod" dmx-param:limit="100" dmx-on:done="run([{wait:{delay:500}},{runJS:{function:'initDataTable',name:'initDataTable',outputType:'text'}}])"></dmx-serverconnect>

Questions:

1. ServerConnect Multiple Loads : Is there a way to prevent dmx-serverconnect from loading multiple times, or to ensure that DataTables initializes only after the final load? (for some reason DataTables triggers and error when loading it Script multiple times, it seems like you can’t change data after loading it once)
2. Initialization Sequence : Is dmx-on:updated the best event to ensure that DataTables initializes only after the table is fully populated?
3. Conflict Resolution : Are there known issues or best practices for using DataTables with Wappler’s ServerConnect component?

[salvuccicarlos]

I’ve read this post: How to use DataTables.net

It’s great, yet I see many (including the post creator crystaltaggart) are having a loading issue. The dmx-on:done or dmx-on:success in the data component seems to be triggering the DataTable script before finishing the data fetching, resulting in a ‘No data available in table’ DataTable error. In fact, jellederijke mentioned it on this comment: How to use DataTables.net

Though I added a wait 1ms component before initializing the destroy_dt and load_dt functions, sometimes it doesn’t work as expected (not every loading time works the same). Do you have any idea @patrick how to solve this problem?

1. Initialization Sequence : Is dmx-on:success or dmx-on:done the best event to ensure that DataTables initializes only after the table is fully populated?
2. Conflict Resolution : Are there known issues or best practices for using DataTables with Wappler’s ServerConnect component?

[Cheese]

Use a Page Flow to load the data source, set a Wait period (500ms or so) then execute/call the function for the Data Tables within the flow,

[salvuccicarlos]

Yes but the waiting time doesn’t seem to be a good coding practice

[Cheese]

Better than no data!

[Hyperbytes]

I had a similar issue recently.
In my case I

1. Created a variable varReady = 0

2. Wrapped the code I’ve wanted to delay in a conditional region (which prevents rendering in DOM) with condition varReady ==1

3. In the server connect which fetched the data needed’s success event, I set varReady =1 which then caused the code in the conditional region to render.

Worked perfectly in my use case although yours may not be the same flow.