javascript - How to properly load jQuery plugins on 3rd party website? -

javascript - How to properly load jQuery plugins on 3rd party website? -

i'm building widget uses few jquery plugins work.

it deployed via:

<script src="http://example.com/widget"></script> <div id="widget"></div>

and fetched script looks this:

(function() { var jquery; // jquery on page; if there, utilize it, otherwise fetch if (window.jquery === undefined || window.jquery.fn.jquery !== '2.1.3') { loadscript("//code.jquery.com/jquery-2.1.3.min.js", scriptloadhandler); } else { jquery = window.jquery; loadexternallibraries(); main(); } // fetch 3rd party libraries server function loadexternallibraries() { <% widget_javascripts.each |filename| %> var url = "//example.com/widget/javascripts/" + "<%= filename %>"; loadscript(url, function() { console.log("added " + "<%= filename%>"); }); <% end %> } function loadscript(url, callback) { /* load script url , calls callback 1 time it's loaded */ var scripttag = document.createelement('script'); scripttag.setattribute("type", "text/javascript"); scripttag.setattribute("src", url); if (typeof callback !== "undefined") { if (scripttag.readystate) { /* old versions of ie */ scripttag.onreadystatechange = function () { if (this.readystate === 'complete' || this.readystate === 'loaded') { callback(); } }; } else { scripttag.onload = callback; } } (document.getelementsbytagname("head")[0] || document.documentelement).appendchild(scripttag); } function scriptloadhandler() { jquery = window.jquery.noconflict(true); loadexternallibraries(); main(); } function main() { jquery(document).ready(function($) { $('#widget').plugin1(); }); } })();

jquery seems load fine, $('#widget').plugin1() returns classic typeerror: $(...).plugin1 not function.

so tried next post (http://alexmarandon.com/articles/widget-jquery-plugins/) , wrapped plugin in function , passed local jquery variable so:

// plugin1 code function initplugin1(jquery) { (function ($) { # plugin code here }(jquery)); } // modified loadexternallibraries function function loadexternallibraries() { % widget_javascripts.each |filename| %> var url = "//example.com/widget/javascripts/" + "<%= filename %>"; loadscript(url, function() { initplugin1(jquery); }); <% end %> }

in add-on beingness reminded initplugin1 not defined every other plugin library fetched, i'm still getting original typeerror error.

assuming have 4-5 such plugins fetch (with none perchance minified well), approaching problem in right manner?

javascript jquery jquery-plugins widget