Skip to content

Conversation

Seb33300
Copy link
Contributor

@Seb33300 Seb33300 commented Apr 24, 2025

In our project, we sometimes faces the following javascript error:

Uncaught Cannot extend unknown button type: reset

This is because buttons are defined inside the DOMContentLoaded event:
https://github.com/yajra/laravel-datatables-vite/blob/3d1d1364e43f9bea547dae9a19236bcfd38d32bd/js/buttons/reset.js#L9

That error does not happens every time, I cannot explain why, but I am not able to reproduce it if I use DOMContentLoaded instead of $(function(){ }.
For some reason, even if it is supposed to be equivalent to DOMContentLoaded, $(function(){ } seems to be faster than DOMContentLoaded in some cases.

So let's use DOMContentLoaded here to be consistent with buttons.

Copy link

@yajra yajra merged commit 2c07222 into yajra:master Apr 28, 2025
6 of 7 checks passed
@yajra
Copy link
Owner

yajra commented Apr 28, 2025

@yajra
Copy link
Owner

yajra commented Aug 13, 2025

@Romkabouter 4643244#r163719119, you can publish and override the scripts view as a workaround.

@Seb33300, should we revert this change?

Thanks!

@Seb33300
Copy link
Contributor Author

Seb33300 commented Aug 13, 2025

Hi @yajra,
Not sure, but what I understand is: @Romkabouter uses ajax to load the table and scripts.

Now that we are using the native js event DOMContentLoaded, it is triggered on page load only.
When the ajax request is loaded, the event is not triggered again.

And it looks like jQuery works differently with $(function(){

If we revert that PR, this re introduce the Uncaught Cannot extend unknown button type: reset error.

I suggest to move the code that init the datatable in a dedicated function
And then:

// Move the code in a dedicated function
function initDataTables() { ... }
// trigger init
if (document.readyState === "complete") {
    initDataTables();
} else {
    document.addEventListener("DOMContentLoaded", initDataTables);
}

@Romkabouter
Copy link

Romkabouter commented Aug 13, 2025

Hi @yajra, Not sure, but what I understand is: @Romkabouter uses ajax to load the table and scripts.

Now that we are using the native js event DOMContentLoaded, it is triggered on page load only. When the ajax request is loaded, the event is not triggered again.

And it looks like jQuery works differently with $(function(){

If we revert that PR, this re introduce the Uncaught Cannot extend unknown button type: reset error.

I suggest to move the code that init the datatable in a dedicated function And then:

// Move the code in a dedicated function
function initDataTables() { ... }
// trigger init
if (document.readyState === "complete") {
    initDataTables();
} else {
    document.addEventListener("DOMContentLoaded", initDataTables);
}

I have made a comment on the change, but indeed when loading via ajax, the event is not triggered. The effect is that the ajax call to get the data is not performed.
I have pinned my version to 12.0.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants