title: How to properly dynamically include jQuery and jQueryUI on many pages
body: <p>I'm building a widget that can be included on many different websites.  This widget will require the use of jQuery.  My customers will install my widget via a  tag that will be included before their <code>&lt;/body&gt;</code> tags (just like how Google Analytics works)</p>
  <p>I'm at a bit of a loss on how to deal with the problem of everyone's website environments being different.</p>
  <p>Currently my solution is to just dynamically load load both jQuery and jQueryUI in my JS code which they will include just before their <code>&lt;/body&gt;</code> tag.  However, this causes issues if they already have jQuery loaded on their website.</p>
  <p>One solution I searched for it to detect if they already have jQuery included via:</p>
  <pre><code>if (typeof jQuery == 'undefined') { 
    // include jQuery 
  }
  if (typeof jQuery.ui == 'undefined')
  {
    // include jQueryUI
  }
  </code></pre>
  <p>However, this caused problems when they already had jQuery loaded... It seems like if they already have jQuery included on their website, my JS widget is not able to access the jQuery library that's already loaded from the customer's website, as I get an error saying that it doesn't recognize the '$'.</p>
  <p>I'm sure this problem has been solved before, but I can't seem to find the answer.</p>
  <h1>UPDATE</h1>
  <p>To clarify things a bit... the code I have included above is okay, it doesn't cause issues.  Here are the use cases:</p>
  <h2>Use Case 1</h2>
  <ol>
  <li>User doesn't have jQuery on their site</li>
  <li>My JS script dynamically loads jQuery and waits for the script to
  finish loading</li>
  <li>All is well</li>
  </ol>
  <h2>Use Case 2</h2>
  <ol>
  <li>User does have jQuery on their site and doesn't have jQueryUI</li>
  <li>My JS script dynamically loads jQueryUI only and waits for the
  script to finish loading</li>
  <li>My JS file tries to invoke $.ajax and it fails :(</li>
  </ol>
  <h2>Use Case 3</h2>
  <ol>
  <li>User does have jQuery on their site and does have jQueryUI</li>
  <li>My JS script doesn't need to load anything so it doesn't</li>
  <li>My JS file tries to invoke $.ajax and it fails :(</li>
  </ol>
  <h3>So the question is...</h3>
  <p>Why is it that my JS file can <strong>only</strong> access $.ajax (and other jQuery functions) when it loads jQuery itself?</p>