Using Multiple jQuery Versions with Django

2013-09-11 Kenneth H. East [view page source]

In an emergency situation, I needed to quickly add a small popup dialog to a Django site. I wanted to use jQueryUI, but it required a newer jQuery than the one included with my version of Django. This note describes what I did to get two versions of jQuery to co-exist and get the job done.

Not surprisingly, jQuery already has the mechanisms to support this use case.

In the base Django template for the site, the one that includes the HTML <head>, I added a link statement to pull in the CSS required for the jQuery-UI dialog to work.

<link rel='stylesheet'
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">
</link>

This was harmless. But, how to handle the multiple jQuery versions? These URLs had all that I needed to know:

http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/ http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page http://api.jquery.com/jQuery.noConflict/

In the relevant Django template body, I added code to create and display the popup dialog.

First, create a HTML div to contain the message that is to be displayed if they try to use a credit card.

<div id='ccp_dialog' title='Disabled Function'>
   <p>I'm sorry, that operation has been temporarily disabled.
   Please contact your customer service representative for
   assistance.</p>
</div>

Now, we want to load jQuery-UI and the jQuery that goes along with it. Note that when this is done, the new jQuery will become the default jQuery. More about that shortly.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

When the new jQuery is loaded, jQuery smartly makes an internal note of the jQuery that was in effect at the time. More correctly, when jQuery is loaded, it makes an internal note of whatever $ was bound to at the time of load (it might not have been another jQuery, but some other library). Calling jQuery.noConflict() restores $ to whatever it was prior to the most recent jQuery load. When noConflict is called with "true", it also restores the name jQuery to its earlier value. This latter behavior is handy when using multiple jQuery libraries, which, BTW, is not advised.

The following code restores the original jQuery which was loaded by Django/Satchmo and it also keeps a reference to the newer version we just loaded in jq_1_10_2.

<script type='text/javascript'>
  jq_1_10_2 = jQuery.noConflict(true);
</script>

With all these preleminaries out of the way, we can get down to business with the dialog. The relevant template can be modified with something like the following:

<script type='text/javascript'>

   /* display the dialog using the new jquery */
   var show_dialog = function () {
      $ = jq_1_10_2;  /* use the new jquery, not the default one */
      $('#ccp_dialog').dialog('open');
      return;
   };

</script>

KHE