1

Tenho uma funcionalidade onde dependendo da situação devo declarar a biblioteca do JQuery e alguns outros scripts, como por exemplo o script Alert.js que uma classe de mesmo nome. Tenho testado esta funcionalidade no Google Chrome e no Firefox, no primeiro os scripts sempre são carregados corretamente antes da execução da função/classe Alert(), porém no Firefox os scripts são carregados de maneira instável, ou seja, quando a função Alert é executada, muitas vezes o jQuery ainda não está disponível, sendo necessário recarregar a página para que na segunda vez ele funcione corretamente.

Para esclarecer melhor, o erro retornado pelo Firefox no console são os seguintes:

Primeiro:

ReferenceError: jQuery is not defined

Segundo:

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

O código do segundo erro está dentro da classe Alert, sendo que $.dialog() é uma função nativa do JQuery UI que não foi carregado devido ao primeiro erro que informava que o jQuery ainda não tinha sido carregado.

Veja abaixo o código desta funcionalidade:

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);
}

Código PHP que executa o script acima (cujo nome é definido pela variável $this->path_load_script):

$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";
17
  • Tente colocar as funções dentro do ready do jQuery.
    – Franchesco
    4/11/2014 às 11:54
  • Não teria como, pois o erro ocorre quando o JQuery ainda não foi carregado, dessa forma a função ready ainda não está disponível. 4/11/2014 às 11:55
  • Hmm, entendi. Pra verificar se o jQuery foi carregado apenas faça if (window.jQuery) { / jQuery carregado }
    – Franchesco
    4/11/2014 às 12:03
  • @mayconfsbrito desses ficheiros precisa sempre do jQuery? ou tem casos em que não quer carregar o jQuery?
    – Sergio
    4/11/2014 às 12:04
  • 1
    Se precisa sempre do jQuery sugiro que o carregue na head com link próprio. Na head o carregamento é sincrono, e evita estes erros. Quando diz "no template o jQuery já é carregado instantâneamente" quer dizer que há outro jQuery ou refere-se ao que está no seu código na pergunta?
    – Sergio
    4/11/2014 às 12:11

1 Resposta 1

0

Em paralelo a este tópico eu abri outro post no Stack Overflow internacional e obtive a resposta a partir da solução sugerida pelo usuário Master Slave. Clique aqui para ver o tópico com a solução proposta.

Para ilustrar melhor postarei abaixo o código que solucionou o meu problema:

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)
}

Obrigado a todos pela ajuda.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .