jQuery Ajax charge et getScript

Question

Je suis en train de mettre en place mon site afin que le contenu dans la zone principale est chargée via javascript (certaines pages prennent un certain temps à rendre). Cependant, j'ai rencontré un peu d'un problème logique lors de l'utilisation jQuery.load (), jQuery.getScript et jQuery.ajax ().

Je dois être en mesure de charger certains fichiers JavaScript via getScript afin que je puisse utiliser ces fonctions, etc à l'intérieur du contenu chargé.

• index.php - Le fichier principal affiché (contient également #loading)
• js / script.js - Le fichier contenant le code de charge
• js / js -. Plusieurs fichiers javascript je dois pouvoir utiliser à l'intérieur #mainContent après la charge
• load.php - Le fichier chargé dans #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');
});

Comme vous pouvez le voir, je suis en train de charger load.php d'abord sans aucun paramètre d'URL et toute interaction de l'utilisateur. Bien que load.php est correctement chaque fois chargé, on ne peut pas dire pour le code javascript. Parfois ça marche, d'autres fois je dois rafraîchir la page plusieurs fois avant que je une console propre (sans erreur).

Les erreurs dans la console me portent à croire que le code js n'est pas chargé correctement avant qu'il ne soit utilisé à l'intérieur load.php. Cela est particulièrement vrai si load.php prend un certain temps (testé avec fonction de veille PHP (5)).

Permettez-moi de savoir si je dois préciser quelque chose:)

Answer 1

Vous ne devriez pas vraiment charger tous ces scripts avec getScript. Vous aurez besoin (ou tout?) D'entre eux à chaque fois, alors pourquoi ne pas simplement les inclure sur la page. En outre, depuis your'e en utilisant jquery pour charger jquery, je vais vous dire avoir déjà inclus sur la page. Donc, ne pas essayer de le charger à nouveau.

Answer 2

Si le problème est le calendrier des charges, vous devriez envisager d'utiliser la dernière version de jQuery avec le comportement différé.

Vous pourriez, par exemple, faire:

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

attendra jusqu'à ce que tous les appels getScript retour puis effectuez l'appel ajax à load.php (ou il déclenchera le handleErrorsFunction () si l'un des échoue ci-dessus).