title: How to properly load jQuery plugins on 3rd party website?
body: <p>I'm building a widget that uses a few jQuery plugins to work.</p>
  
  <p>It is deployed via:</p>
  
  <pre><code>&lt;script src="http://example.com/widget"&gt;&lt;/script&gt;
  &lt;div id="widget"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And the fetched script looks like this:</p>
  
  <pre><code>(function() {
    var jQuery;
    // Look for jQuery on page; if there, use it, otherwise fetch it
    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 from server
    function loadExternalLibraries() {
      &lt;% widget_javascripts.each do |filename| %&gt;
        var url = "//example.com/widget/javascripts/" + "&lt;%= filename %&gt;";
        loadScript(url, function() {
          console.log("Added " + "&lt;%= filename%&gt;");
        });
      &lt;% end %&gt;
    }
  
    function loadScript(url, callback) {
      /* Load script from url and calls callback once it's loaded */
      var scriptTag = document.createElement('script');
      scriptTag.setAttribute("type", "text/javascript");
      scriptTag.setAttribute("src", url);
      if (typeof callback !== "undefined") {
        if (scriptTag.readyState) {
          /* For 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();
      });
    }
  })();
  </code></pre>
  
  <p>jQuery seems to load fine, but <code>$('#widget').plugin1()</code> returns the classic <code>TypeError: $(...).plugin1 is not a function</code>.</p>
  
  <p>So I tried following this post (<a href="http://alexmarandon.com/articles/widget-jquery-plugins/" rel="nofollow">http://alexmarandon.com/articles/widget-jquery-plugins/</a>) and wrapped the plugin in another function and passed the local <code>jQuery</code> variable to it like so: </p>
  
  <pre><code>// Plugin1 code
  function initPlugin1(jQuery) {
    (function ($) {
      # plugin code here
    }(jQuery));
  }
  
  // modified loadExternalLibraries function
  function loadExternalLibraries() {
    % widget_javascripts.each do |filename| %&gt;
      var url = "//example.com/widget/javascripts/" + "&lt;%= filename %&gt;";
      loadScript(url, function() {
        initPlugin1(jQuery);
      });
    &lt;% end %&gt;
  }
  </code></pre>
  
  <p>In addition to being reminded that <code>initPlugin1 is not defined</code> for every other plugin library fetched, I'm still getting the original <code>TypeError</code> error.</p>
  
  <p>Assuming I have 4-5 such plugins to fetch (with none to all possibly minified as well), am I approaching this problem in the correct manner?</p>