1

I'm developing a plugin that makes use of two other plugins. I was planning on using .getScript() to load the other two scripts, but I'm wondering how best to do this. Specifically, if the call is async, how can I guarantee that the scripts are loaded before the plugin is initialized? Would it be smarter to make the calls not async? (Is that possible? )

Code:

(function($){

    // Is this the right place?
    $.getScript('plugin1.js', function() {});
    $.getScript('plugin2.js', function() {});

    // Plugin stuff:
    $.fn.myPlugin = function() {

        return this.each(function() {

        // Dependent plugins better be loaded by this point!


        }); // End of this.each(...)
    };  // End of plugin
})(jQuery); // End of closure 

Thanks-

3 Answers 3

2

The $.getScript(); method is basically a wrapper for the $.ajax(); method. This means it should be hooked into the jQuery Deferred object.

Try this:

var loading = $.getScript('myScript.js');

$.when( loading ).then(function() {

    // Start your plugin code here.

});

Multiple Actions

var script_1 = $.getScript('myScript.js');
var script_2 = $.getScript('myScript2.js');

$.when( script_1, script_2 ).then(function() {

    // Start your plugin code here.

});
2
  • @Seth- deffered object looks money- hadn't run into it before. Can you show me how you would chain multiple scripts?
    – Yarin
    Jul 5, 2011 at 2:52
  • @Yarin - I updated the above example to show you how to do multiple deferred's. You can pass as many objects as you need to track.
    – Seth
    Jul 5, 2011 at 14:25
1

getScript isn't really a great decision when you have scripts you know you're going to need -- just make sure you include both plugins as <script> elements above your own.

But you could do:

(function($){
  var plugin1Loaded = false;
  var plugin2Loaded = false;

  $.getScript('plugin1.js', function() {plugin1Loaded = true;});
  $.getScript('plugin2.js', function() {plugin2Loaded = true;});

  $.fn.myPlugin = function() {
    if (plugin1Loaded && plugin2Loaded) {
      ...
    }
  };  // End of plugin
})(jQuery); // End of closure 
1
  • This doesn't solve the issue of a page calling the plugin before the dependent scripts are loaded.
    – Yarin
    Jul 5, 2011 at 2:42
0

I'm not sure if this is the most efficient way of doing this, but why not:

$.getScript('plugin1.js', function() {
  $.getScript('plugin2.js', function() {
    (function($){

    // Plugin stuff:
    $.fn.myPlugin = function() {

        return this.each(function() {

        // Dependent plugins better be loaded by this point!


        }); // End of this.each(...)
    };  // End of plugin
    })(jQuery); // End of closure 
  });
});

Update: Regarding asynchronicity, you should consider whether you don't mind keeping your users waiting at least until both these files are fetched.

4
  • @sombe- Bu what happens if my page tries calling the plugin before the dependencies have loaded- the plugin will not have been initialized..
    – Yarin
    Jul 5, 2011 at 2:05
  • @Yarin see the edit. In that case, for example if you have code that needs to fire when the page loads, you'll need to fetch them synchronously.
    – Gal
    Jul 5, 2011 at 2:07
  • Regarding your update- They'll have to wait anyway, as the plugin won't work without them?
    – Yarin
    Jul 5, 2011 at 2:44
  • @Yarin they won't wait if you fetch the dependencies asynchronously, and if you don't need whatever use your plugin gives when the page loads (for example, a plugin that handles form submission, assuming it takes time to fill out).
    – Gal
    Jul 5, 2011 at 3:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.