Jquery Conflict between versions

Question

I currently have an app that works by placing the following within the HTML header

<link href="{{ MEDIA_URL }}css/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="{{ MEDIA_URL }}jquery/css/custom/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="{{ MEDIA_URL }}jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}jquery/js/jquery-ui-1.8.6.custom.min.js"></script>

However I also want to use the new bootstrap styling that requires the following,

<script type="text/javascript" src="{{ MEDIA_URL }}jquery/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}jquery/js/bootstrap.min.js"></script>

However as soon I mix the 2 I get some random bevaiour with the app, typically the following error "Uncaught ReferenceError: jQuery is not defined".

How should I be doing this ?

Thanks,

Answer 1

If you really MUST have two version of jQuery, really not recommended, you can use jQuery.noConflict.

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.

Docs: http://api.jquery.com/jQuery.noConflict/

But consider to refactor you code to use only one version of jQuery and save time and pain.

Answer 2

the most obvious solution would be to remove the first include of jquery and pach then all together, like this:

<link href="{{ MEDIA_URL }}css/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="{{ MEDIA_URL }}jquery/css/custom/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="{{ MEDIA_URL }}jquery/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}jquery/js/jquery-ui-1.8.6.custom.min.js">   </script>
<script type="text/javascript" src="{{ MEDIA_URL }}jquery/js/bootstrap.min.js"></script>

but you'll need to check that all your JqueryUI components still work OK (UI 1.8.6 has not been designed to work with jquery 1.9, you might have some problems with some widgets)

Answer 3

jQuery is a large library, even when minified. Having two copies of it on your site is extremely inefficient. It will slow down your page loads, make the site run slower once its loaded, and will increase your bandwidth costs for the extra unnecessary downloads. You should fix your code so that you don't need both versions.

If you have supporting libraries that require the old jQuery version, you should upgrade them to the latest release, which hopefully works with the newer version jQuery. If the libs you're using are no longer supported and have not been ugpraded, then you should consider replacing them (you don't want to be relying on unsupported code, do you?), or try to fix them yourself.

If you can't do this, or need more time, there are still options:

If your old code fails in the new version of jQuery due to it using some deprecated features, then you can use jQuery.migrate plugin for jQuery 1.9 and higher, which brings back the old deprecated features. This will allow your old code to continue working with the new jQuery version.

Note that you should still try to fix the old code so that it doesn't need this. You should consider the Migrate plugin to be a temporary measure to give you time to do this.

If you really can't make your old code code work with the newer library version, and you absolutely have to have multiple copies of jQuery in your site, then you can use jQuery's .noConflict feature. This allows you to run each version of jQuery under its own name, so instead of calling the $() function you could use jQuery14() and jQuery19() for example. You should consider this a last-resort though.