title: Web widget creation using jquery with passing a parameter to it
body: <p>I am trying to create widget using jquery. So I create a js file, that is responsible for spitting html to any website (say xyz.com) . That js file is as follows:</p>
  
  <pre><code>// @credit to: 
  // http://alexmarandon.com/articles/web_widget_jquery/
  // http://stackoverflow.com/a/2190927/1560470
  
  var MYCARD = MYCARD || (
    function() {
      // Localize variables
      var jQuery, _cid;
  
      return {
        init : function (id) {
          _cid = id; 
          /******** Load jQuery if not present *********/
          if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.11.2') {
            var script_tag = document.createElement('script');
            script_tag.setAttribute("type","text/javascript");
            script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js");
            if (script_tag.readyState) {
              script_tag.onreadystatechange = function () { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                  this.scriptLoadHandler();
                }
              };
            } else {
              script_tag.onload = this.scriptLoadHandler;
            }
            // Try to find the head, otherwise default to the documentElement
            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
          } else {
            // The jQuery version on the window is the one we want to use
            jQuery = window.jQuery;
          }
        },
        scriptLoadHandler: function () {
          // Restore $ and window.jQuery to their previous values and store the
          // new jQuery in our local jQuery variable
          jQuery = window.jQuery.noConflict(true);
        },
        render: function() {
          jQuery(document).ready(function($) { 
            /******* Load CSS *******/
            var css_link = $("&lt;link&gt;", { 
              rel: "stylesheet", 
              type: "text/css", 
              href: "mystyle.css" 
            });
            css_link.appendTo('head');          
  
            /******* Load HTML *******/
            var jsonp_url = "https://twitter.com/"+_cid+"?modal=true&amp;callback=?";
            $.getJSON(jsonp_url, function(data) {
              $("#"+_cid+"-widget-container-for-card").html("This data comes from twitter: " + data.html);
            });
          });
        }
      };
    }()
  );
  </code></pre>
  
  <p>And in xyz.com's page, user can insert my widget as follows: (My goal is to pass an id from each widget, so that widget can render accordingly. Below you can see <code>MYCARD.init("cnn");</code> where <code>cnn</code> is the id)</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
    &lt;h2&gt;CNN on Twitter&lt;/h2&gt;
    &lt;script src="http://widgetwebsite.com/embed.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      MYCARD.init("cnn");
      MYCARD.render();
    &lt;/script&gt;
    &lt;div id="cnn-widget-container-for-card"&gt;&lt;/div&gt;
    &lt;h2&gt;BBC on Twitter&lt;/h2&gt;
  
    &lt;script src="http://widgetwebsite.com/embed.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      MYCARD.init("bbc");
      MYCARD.render();
    &lt;/script&gt;
    &lt;div id="bbc-widget-container-for-card"&gt;&lt;/div&gt;
  
    &lt;h2&gt;CNN on Twitter&lt;/h2&gt;
    &lt;script src="http://widgetwebsite.com/embed.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      MYCARD.init("cnn");
      MYCARD.render();
    &lt;/script&gt;
    &lt;div id="cnn-widget-container-for-card"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>However when I run this, I get <code>Uncaught TypeError: jQuery is not a function</code> , occurred at <code>jQuery(document).ready(function($) {</code> while <code>jQuery</code> should have been initialized at <code>init</code> method. Any idea what is going wrong here?</p>
  
  <p>Please note, user may include same widget multiple times on his page (by mistake), and if that happens, then this code should handle that corner case.</p>