jQuery cannot load plugin file using ajax before calling the plugin function, thus, gives kind of weird result

问题

I am trying to load jsvascript files at runtime like this

<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
var SRC_URL = 'http://localhost/mytest/scripts/';
var scripts = [
    'jquery/colorbox/jquery.colorbox.js',
    'app/mbro.js'
];

for (var x = 0; x < scripts.length; x++) {
    sUrl = SRC_URL + scripts[x];
    $.ajax({
        url: sUrl,
        dataType: "script",
        async: false,
        success: function() {
            console.log(x + ': ' + sUrl);
        }
    });
}
</script>

What I am trying here is to load jquery.colorbox.js before loading mbro.js, mbro.js just tries to initialize colorbox on click of a link. The content of the mbro.js is as follows

(function ($, W, D) {
    var abc = {};
    abc.UTIL = {
        openPopup: function () {
            $(".mbro").colorbox({
                inline: false,
            });
        },
    };

    $(D).ready(function ($) {
        abc.UTIL.openPopup();
    });

})(jQuery, window, document);

The HTML looks like this

<a class="mbro" href="media/popup">Browse</a>

But I am getting this error

TypeError: $(...).colorbox is not a function
$(".mbro").colorbox({

What should be cause of this error and how to resolve this situation. Please give me some suggestions. Thank you in advance.

回答1:

You should use $.getScript() jQuery method and keep async behaviour of ajax requests, e.g:

(function loadScript(x) {
    sUrl = SRC_URL + scripts[x];
    $.getScript(sUrl, function(){
        if(scripts[++x]) loadScript(x);
    });
}(0));

To keep cache behaviour, you should use $.ajax method as mentionned in comment below. Here a workaround if for some reason you want to still use $.getScript method:

By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested. You can override this feature by setting the cache property globally using $.ajaxSetup()

var cacheSetting = $.ajaxSetup()['cache'];
$.ajaxSetup({
  cache: true
});
(function loadScript(x) {
    sUrl = SRC_URL + scripts[x];
    $.getScript(sUrl, function () {
        if (scripts[++x]) loadScript(x);
        else {
            $.ajaxSetup({
                cache: cacheSetting 
            });     
        }       
    });
}(0));

回答2:

Sending the load request before doesn't guarantee that it will be loaded before. The best to do in your situation seems to be loading mbro.js inside the success callback of the colorbox.js loading. This way, you guarantee that your script is loaded only after colorbox.js's loading is complete.

$.ajax({
    url: SRC_URL + 'jquery/colorbox/jquery.colorbox.js',
    dataType: "script",
    success: function() {
        $.ajax({
            url: SRC_URL + 'app/mbro.js',
            dataType: "script",
            async: false,
            success: function() {
                console.log('Done! Both loaded in the desired order!')
            }
        });
    }
});

EDIT:

I hadn't noticed the use of async: false here. Nevertheless, it's strongly non recommended to use it and it's been deprecated in the latest versions of jQuery.

来源：https://stackoverflow.com/questions/30627162/jquery-cannot-load-plugin-file-using-ajax-before-calling-the-plugin-function-th

标签

jquery

ajax

runtime-error

eventtrigger