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";
ready
do jQuery.if (window.jQuery) { / jQuery carregado }