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';

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';

• javascript
• jquery
• jquery-plugins
• include

• You don't need make obj into a jquery object twice... use obj.append(nDiv) – Mottie Commented Sep 17, 2010 at 2:29
• that was actually because the call is embedded inside of an ajax call, I left the ajax stuff out tho to simplify. – jon3laze Commented Sep 17, 2010 at 2:31

2 Answers 2

You can also use getScript function from jQuery.

It could be used with callbacks for success and/or failure like:

$.getScript("somejs.js", function(data, textStatus, jqxhr) {
    console.log("callback");    
}

$.getScript("somejs.js")
.done(function(script, textStatus) {
    console.log("done callback");
})
.fail(function(jqxhr, settings, exception) {
    console.log("fail callback");
});      

Or without assigning a callback like:

$.getScript("somejs.js");            

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.