Carga de jQuery Ajax y getScript

Question

Estoy intentando configurar mi sitio para que el contenido del área principal se cargue mediante javascript (algunas páginas tardan un poco en procesarse). Sin embargo, me he encontrado con un pequeño problema lógico al usar jQuery.load (), jQuery.getScript y jQuery.ajax ().

Necesito poder cargar ciertos archivos javascript a través de getScript para poder usar estas funciones, etc., dentro del contenido cargado.

• index.php: el archivo principal que se muestra (también contiene #loading)
• js / script.js: el archivo que contiene el código de carga
• js / *. js: varios archivos javascript que necesito poder usar dentro de #maincontent después de la carga
• load.php: el archivo que se está cargando en #maincontent

script.js:

$(document).ready(function() {
$('#loading').fadeIn('fast');
$('#maincontent').load('load.php', function() {
    $('#loading').fadeOut('fast');
    $('#maincontent').fadeIn('slow');
});

$('#navigation li a').click(function() {
    $('#maincontent').fadeOut('fast');

    $.getScript('js/jquery.contextMenu-1.01.js');
    $.getScript('js/jquery-1.5.1.min.js');
    $.getScript('js/jquery-ui-1.8.12.custom.min.js');
    $.getScript('js/jquery.qtip-2.0.0.min.js');
    $.getScript('js/ajax.js');

    $.ajax({
        method: 'get',
        url: 'load.php',
        data: 'page=' + $(this).attr('rel'),
        beforeSend: function() {
            $('#loading').fadeIn('fast');
        },
        complete: function() {
            $('#loading').fadeOut('fast');
        },
        success: function(html) {
            $('#maincontent').fadeIn('slow');
            $('#maincontent').html(html);
        }
    });
});

$.getScript('js/jquery.contextMenu-1.01.js');
$.getScript('js/jquery-1.5.1.min.js');
$.getScript('js/jquery-ui-1.8.12.custom.min.js');
$.getScript('js/jquery.qtip-2.0.0.min.js');
$.getScript('js/ajax.js');
});

Como puede ver, estoy intentando cargar load.php primero sin ningún parámetro de URL y sin ninguna interacción del usuario. Aunque load.php se carga correctamente cada vez, no se puede decir lo mismo del código javascript. A veces funciona, otras veces tengo que actualizar la página varias veces antes de obtener una consola limpia (sin errores).

Los errores en la consola me sugieren que el código js no se carga correctamente antes de que se use dentro de load.php. Esto es especialmente cierto si load.php tarda un poco (probado con la función PHP sleep (5)).

Avíseme si necesito aclarar algo :)

Answer 1

No debería cargar todos esos scripts con getScript.Necesitará algunos (¿o todos?) De ellos cada vez, así que ¿por qué no incluirlos en la página?Además, dado que estás usando jquery para cargar jquery, voy a decir que ya lo tienes incluido en la página.Así que no intente cargarlo de nuevo.

Answer 2

Si el problema es la sincronización de las cargas, debería considerar usar la última versión de jQuery con comportamiento diferido.

Por ejemplo, podría hacer:

    var wait1 = $.getScript('js/jquery.contextMenu-1.01.js');
var wait2 = $.getScript('js/jquery-1.5.1.min.js');
var wait3 = $.getScript('js/jquery-ui-1.8.12.custom.min.js');
var wait4 = $.getScript('js/jquery.qtip-2.0.0.min.js');
var wait5 = $.getScript('js/ajax.js');
$.when(wait1, wait2, wait3, wait4, wait5).then(function() {
    $.ajax({
        method: 'get',
        url: 'load.php',
        data: 'page=' + $(this).attr('rel'),
        beforeSend: function() {
            $('#loading').fadeIn('fast');
        },
        complete: function() {
            $('#loading').fadeOut('fast');
        },
        success: function(html) {
            $('#maincontent').fadeIn('slow');
            $('#maincontent').html(html);
        }
    });
}, function() { handleErrorsFunction()}); 

Esto esperará hasta que todas las llamadas getScript regresen y luego hará la llamada ajax a load.php (o activará la función handleErrorsFunction () si una de las anteriores falla).