Buttons and select not loading in time

Buttons and select not loading in time

olwoolwo Posts: 4Questions: 1Answers: 0
edited March 2023 in Free community support

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

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • olwoolwo Posts: 4Questions: 1Answers: 0

    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 ?

  • olwoolwo Posts: 4Questions: 1Answers: 0
    edited March 2023

    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.

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Answer ✓

    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

  • olwoolwo Posts: 4Questions: 1Answers: 0

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

Sign In or Register to comment.