jQuery Ajax carica e getScript

Question

Sto cercando di impostare il mio sito in modo che il contenuto nell'area principale venga caricato tramite javascript (alcune pagine richiedono un po 'di tempo per il rendering). Tuttavia, ho riscontrato un po 'di problemi logici durante l'utilizzo di jQuery.load (), jQuery.getScript e jQuery.ajax ().

Devo essere in grado di caricare determinati file javascript tramite getScript in modo da poter utilizzare queste funzioni ecc. all'interno del contenuto caricato.

• index.php - Il file principale visualizzato (contiene anche #loading)
• js / script.js: il file contenente il codice di caricamento
• js / *. js - Diversi file javascript che devo essere in grado di utilizzare all'interno di #maincontent dopo il caricamento
• load.php - Il file che viene caricato in #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');
});

Come puoi vedere, sto provando a caricare prima load.php senza alcun parametro URL e nessuna interazione da parte dell'utente. Sebbene load.php venga caricato correttamente ogni volta, lo stesso non si può dire per il codice javascript. A volte funziona, altre volte devo aggiornare la pagina alcune volte prima di ottenere una console pulita (nessun errore).

Gli errori nella console mi suggeriscono che il codice js non viene caricato correttamente prima di essere utilizzato all'interno di load.php. Ciò è particolarmente vero se load.php impiega un po 'di tempo (testato con la funzione PHP sleep (5)).

Fammi sapere se ho bisogno di chiarimenti :)

Answer 1

Non dovresti davvero caricare tutti quegli script con getScript.Avrai bisogno di alcuni (o tutti?) Ogni volta, quindi perché non includerli semplicemente nella pagina.Inoltre, poiché stai usando jquery per caricare jquery, dirò che lo hai già incluso nella pagina.Quindi non provare a caricarlo di nuovo.

Answer 2

Se il problema è la tempistica dei caricamenti, dovresti considerare di utilizzare l'ultima versione di jQuery con comportamento differito.

Potresti, ad esempio, fare:

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

Questo attenderà fino a quando tutte le chiamate getScript ritorneranno e quindi eseguirà la chiamata ajax a load.php (o attiverà handleErrorsFunction () se una delle precedenti fallisce).