Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Its hard to tell what you are doing with your library, but it seems you are building some type of widget for use on multiple sites.</p> <p><em>From here down has been updated after an enlightening comment from @K Prime caused me research exactly how you could include two copies of jQuery if needed:</em></p> <p>It is <em>generally</em> bad to use jQuery if you are building a widget that will live on a site <em>outside</em> your control, and will be added to the site with a "copy this embed code and paste onto your site" type of functionality. <em>(Of course jQuery widgets and plugins abound, but these are normally chosen and installed/implemented by developers not a generic "copy-n-paste" widget type implementation)</em></p> <p>Probably the biggest reason (after realizing you <em>can</em> run two copies of jQuery on the same page) is the file size increase. Whether it is warranted will depend on your particular needs and function. Simple small widget = straight JS. Complex website front-end extension, then it probably is worth the file-size increase.</p> <p>To include it properly (so you don't run into conflicts on their site) follow a workflow that looks something like this:</p> <ol> <li>Dynamically add jQuery to their page using the Google APIs as mentioned on the other answers here.</li> <li>Run <code>var mywidget_jQuery = $.noConflict( true );</code> which will restore the original meaning of <code>$</code> <em>and</em> restore the original meaning of <code>window.jQuery</code>.</li> <li>Dynamically add your script file, but be sure to wrap the entire thing in a self executing anonymous function like this:</li> </ol> <p><strong>JS</strong></p> <pre><code>(function($){ ... Your code here ... })(mywidget_jQuery); </code></pre> <p>Now, you can safely use <code>$</code> inside your special function and all the jQuery features you want without issue.</p> <p><strong>Extra credit</strong> You could wrap steps 1 and 2 in an if statement that tests if <code>window.jQuery</code> is defined and if it, test if <code>jQuery.fn.version</code> is high enough to run your code. If either test fails, then run steps 1 and 2. If it passes, however, then just run <code>var mywidget_jQuery = window.jQuery</code> so the script you include in step 3 will still run.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload