Buttons and select not loading in time

olwo

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

colin

We're happy to take a look, but as per the forum rules, please link to a test case - 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

olwo

Hi,
I am using datatables with select and buttons extension. The problem: Although datables is loaded first, these extensions through errors like
"dataTables.select.min.js:4 Uncaught TypeError: Cannot set properties of undefined (setting 'select')" and
"dataTables.buttons.min.js:4 Uncaught TypeError: Cannot read properties of undefined (reading 'ext')
After a few reloads it works but that seems just to be an "accident"
What is wrong ?

olwo

sorry, to be more exact:

there is a script that loads all needed styles and scripts:

var filesAdded = '';

function loadJS(path) {
    if (filesAdded.indexOf(path) !== -1) {
        return;
    }
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = path;
    script.type = 'text/javascript';
    head.append(script);
    filesAdded += ' ' + path
}

function loadCSS(path) {
    if (filesAdded.indexOf(path) !== -1) {
        return;
    }
    var head = document.getElementsByTagName('head')[0];
    var style = document.createElement('link');
    style.href = path;
    style.type = 'text/css';
    style.rel = 'stylesheet';
    head.append(style);
    filesAdded += ' ' + path;
}

and this script loads the following files:

const cap = 'xxx'
loadCSS('../libs/bootstrap/5.2.3/css/bootstrap.min.css')
loadCSS('../libs/bootstrapicons1.10.3/bootstrap-icons.css')
loadJS('../libs/jquery/3.6.1/jquery-3.6.1.min.js')
loadJS('../libs/i18n/i18next.min.js')
loadJS('../libs/i18n/jquery-i18next.min.js')
loadJS('../libs/i18n/i18nextHttpBackend.min.js')

waitforjquery();

function waitforjquery() {
    if (window.jQuery) {
        loadJS('../libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js')
        let hash = window.location.hash
        if (hash === "#logon" || hash === "#register" || hash === "#forgotpassword") {
            loadJS('www.google.com/recaptcha/enterprise.js?render=' + cap)
        } else {

            loadCSS('../libs/datatables/1.13.4/css/datatables.min.css')
            loadCSS('../libs/datatables/buttons/2.3.6/buttons.dataTables.min.css')
            loadCSS('../libs/datatables/select/1.6.2/select.dataTables.min.css')
            loadJS('../libs/datatables/1.13.4/js/datatables.min.js')
            loadJS('../libs/qrcode/qrcode.min.js')
            loadJS('../libs/datatables/buttons/2.3.6/dataTables.buttons.min.js')
            loadJS('../libs/datatables/select/1.6.2/dataTables.select.min.js')
        }
    } else {
        setTimeout(function () {
            waitforjquery()
        }, 100);
    }
}

the resulting htmlhas the correct order of files, but still i get the error

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

allan

It sounds like the files are being loaded out of sequence, however logging at your code there it looks like they are being requested in the correct order. It is almost as if they have their async property set on the script, but I can see in the code above that isn't the case.

Can you give me a link to your page showing the issue please?

Allan

olwo

solved it and it was a loading issue. Thanks for your help