Question

I am building a custom jQuery plugin for a project I am working on. I want to return an object that is custom to another jQuery plugin…rather than having to make sure that each page that uses my plugin also has this other plugin, is it possible to include it in the actual plugin itself?

Rather than type the following on each page that uses my plugin:

<script type="text/javascript" src="url_to_my_plugin" />
<script type="text/javascript" src="url_to_plugin" />

I wanted to see if there is an option that would allow something like:

(function($) {
          $.include('url_to_plugin');
          //code to implement my plugin
})(jQuery);

Thanks for the suggestion Marko… I may be doing something wrong because the plugin I am referencing is not being recognized. Below is my code:

(function($) {
     var script = document.createElement('script');
     script.type = 'text/javascript';
     script.src = 'jquery.simplemodal.js'; //in same dir as my plugin
     //tried both
     document.body.appendChild(script);
     document.getElementsByTagName('head')[0].appendChild(script);

     $.fn.SUI_CheckProgress = function(options) {
          return this.each(function() {
               var obj = $(this);
               var nDiv = $('<div>');
               nDiv.modal(); //error nDiv.modal() is not a function
               $(obj).append(nDiv);
          }
     };
});

I tried declaring the script both inside and outside of the actual function call (the ideal is for it to happen globally). I verified the code executes correctly if I reference the script in the page I am calling from, however when I remove the reference it fails. Any additional info on programatically adding scripts to a page would be appreciated.

Fixed: My issue was that I was referencing the same directory as the js plugin, however when it’s added to the page it’s outside of that directory.

was

script.src = 'jquery.simplemodal.js';

fixed

script.src = 'js/jquery.simplemodal.js';

Answer 1

Sure – you can create a new script element and append it to the head.

var script = document.createElement('script');
script.src = 'url-to-plugin';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

If this doesn’t work, maybe try the method on this page, it’s a slightly different approach using setAttribute.