jQuery Ajax load and getScript

Question

I'm trying to set up my site so that content in the main area is loaded via javascript (some pages take a while to render). However, I've run into a bit of a logical problem when using jQuery.load(), jQuery.getScript and jQuery.ajax().

I need to be able to load certain javascript files via getScript so that I can use these functions etc inside the loaded content.

• index.php - The main file being displayed (also contains #loading)
• js/script.js - The file containing the load code
• js/*.js - Several javascript files I need to be able to use inside #maincontent after the load
• load.php - The file being loaded into #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');
});

As you can see, I'm trying to load load.php first without any URL parameters and any interaction from the user. Although load.php is loaded correctly every time, the same can't be said for the javascript code. Sometimes it works, other times I have to refresh the page a few times before I get a clean console (no errors).

The errors in the console suggest to me that the js code isn't loaded properly before it is being used inside load.php. This is especially true if load.php takes a while (tested with PHP sleep(5) function).

Let me know if I need to clarify anything :)

Answer 1

If the problem is the timing of the loads, you should consider using the latest version of jQuery with deferred behavior.

You could, for instance, do:

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

This will wait until all of the getScript calls return and then do the ajax call to load.php (or it will trigger the handleErrorsFunction() if one of the above fails).