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:
- Is the
dmx-on:updated
the best event to use for ensuring that DataTables initializes only after the table is fully populated? - 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.
- 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!