Instability when loading JQuery dynamically in window.load () in Firefox

Navigation
1

I have a functionality where depending on the situation I must declare the JQuery library and some other scripts, such as the script Alert.js that a class of the same name. I have tested this functionality in Google Chrome and Firefox, in the first the scripts are always loaded correctly before the execution of the function / class Alert (), but in Firefox the scripts are loaded in an unstable manner, that is, when the Alert function is executed , often jQuery is not yet available, so it is necessary to reload the page so that the second time it works correctly.

To clarify further, the error returned by Firefox in the console are as follows:

First: 

ReferenceError: jQuery is not defined

Second: 

TypeError: $(...).dialog is not a function
$("#dialog-message").dialog(arrayPropriedades);

The second error code is inside the Alert class, where $ .dialog () is a native JQuery UI function that was not loaded due to the first error reporting that jQuery had not yet been loaded. >

See below the code for this feature: 

if (typeof (Alert) === 'undefined') {

    var scripts = [
        DIR_JS_LIB + 'lib/jquery/jquery.min.js',
        DIR_JS_LIB + 'lib/jquery/jquery-ui/jquery-ui.min.js',
        DIR_JS_LIB + 'scripts/componentes/dialog/AcaoJanela.js',
        DIR_JS_LIB + 'scripts/componentes/dialog/Botao.js',
        DIR_JS_LIB + 'scripts/componentes/dialog/Dialog.js',
        DIR_JS_LIB + 'scripts/componentes/dialog/Alert.js'
    ];

    for (var i = 0; i < scripts.length; i++) {
        include(scripts[i]);
    }

}
window.onload = function () {

    Alert(window.mensagem, window.titulo, window.botoes);
}

function include(file_path) {
    var j = document.createElement("script");
    j.src = file_path;
    document.getElementsByTagName('head')[0].appendChild(j);
}

PHP code that runs the above script (whose name is defined by the $this->path_load_script variable): 

$str .= '<link rel="stylesheet" type="text/css" href="/app/assets/css/styles.css"/>'
                . '<link rel="stylesheet" type="text/css" href="' . DIR_JS_LIB . 'lib/jquery/jquery-ui/jquery-ui.custom.min.css" />'
                . "<script>"
                . "DIR_JS_LIB = '" . DIR_JS_LIB . "';\n"
                . "isColetor = " . (isColetor() ? 'true' : 'false') . ";\n"
                . "mensagem = '" . $this->getMensagem() . "';\n"
                . "titulo = '" . $this->getTitulo() . "';\n"
                . "botoes = {" . implode(',', $this->getBotoes()) . "};\n"
                . "try{\n"
                . get_called_class() . "(mensagem, titulo, botoes);\n"
                . "} catch(err) {\n"
                . "var script = document.createElement('script');"
                . "script.src='" . $this->path_load_script . "';\n"
                . " document.getElementsByTagName('head')[0].appendChild(script);\n"
                . "}\n"
                . "</script>\n";
    
asked by anonymous 04.11.2014 / 12:26

1 answer

0

Parallel to this topic I opened another post in the International Stack Overflow and got the answer from the solution suggested by the user Master Slave . Click here to see the topic with the proposed solution .

To illustrate, I'll post below the code that solved my problem: 

window.onload = function () {

    var scripts = [
        DIR_JS_LIB + 'lib/jquery/jquery.min.js',
        DIR_JS_LIB + 'lib/jquery/jquery-ui/jquery-ui.min.js',
        DIR_JS_LIB + 'scripts/componentes/dialog/AcaoJanela.js',
        DIR_JS_LIB + 'scripts/componentes/dialog/Botao.js',
        DIR_JS_LIB + 'scripts/componentes/dialog/Dialog.js',
        DIR_JS_LIB + 'scripts/componentes/dialog/Alert.js'
    ];

    include(scripts[0], function () {
        include(scripts[1], function () {
            include(scripts[2], function () {
                include(scripts[3], function () {
                    include(scripts[4], function () {
                        include(scripts[5], function () {
                            Alert(window.mensagem, window.titulo, window.botoes);
                        });
                    });
                });
            });
        });
    });

}

function include(filename, callback) {
    var fileref = document.createElement('script');
    fileref.setAttribute("type", "text/javascript");
    fileref.setAttribute("src", filename);
    if (fileref.readyState) {
        fileref.onreadystatechange = function () { /*IE*/
            if (fileref.readyState == "loaded" || fileref.readyState == "complete") {
                fileref.onreadystatechange = null;
                callback();
            }
        }
    } else {
        fileref.onload = function () {  /*Other browsers*/
            callback();
        }
    }

    if (typeof fileref != "undefined")
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(fileref)
}

Thank you all for the help.

    
04.11.2014 / 14:53
Discovering classes for new entries from a training already done Check items from a list in another list