javascript - script reference causes conflict

Question

I have code 1 which executes with this in the head:

<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

Then I have code 2 which goes by:

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="livesearch.js" type="text/javascript"></script>

The problem is that when I put the last reference (code 2) the first doesn't work anymore.. What am I doing wrong?

( for some reason code 2 doesnt react on jquery 1.7 )

Answer 1

What you need is this : jQuery.noConflict.

If necessary, we can free up the jQuery name as well by passing true as an argument to the method. This is rarely necessary, and if we must do this (for example, if we need to use multiple versions of the jQuery library on the same page)

For example:

<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="javascript">
// now you alias the v1.7 jQuery to jQuery17
jQuery17 = jQuery.noConfict(true);
</script>

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="javascript">
// now you alias the v1.4 jQuery to jQuery14
jQuery14 = jQuery.noConfict(true);
</script>

And put you two parts of code in different scopes.

(function($){
//put your codes here which need jQuery 1.7 version
.....
})(jQuery17);

(function($){
//put your codes here which need jQuery 1.4 version
.....
})(jQuery14);