CODEWITHSUNDEEP
javascript
user3130599
user3130599

Reputation: 1

use two version of jquery at one page

I want to use two version of jquery at one page but how?Here I want to use jquery-1.8.1.min.js" with bellow script and jquery-1.3.2.min.j with another 

     <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery-1.8.1.min.js"></script>
 <script>

 $(document).ready (function(){

  $('.following').hover(function(){
      $(this).text("Unfollow");
    },function(){
       $(this).text("Following");
    });

    $('.following').click(function(){
    $(this).toggleClass('following follow').unbind("hover");
    if($(this).is('.follow')){
        $(this).text("Follow");
    }
    else{

        $(this).bind({
            mouseleave:function(){$(this).text("Following");},
            mouseenter:function(){$(this).text("Unfollow");}      
        });
    }
  });
}); 





 </script>

Upvotes: 0

Views: 114

Answers (3)

Guffa
Guffa

Reputation: 700252

If possible, you should rewrite the scripts to use the same version of jQuery. The code that you show isn't very complicated, and should be possible to rewrite easily enough.

Anyhow, using the noConflict method, you can use two version of jQuery. You would need to put one of the scripts in a scope where the $ identifier references the new version. By Calling $.noClonflict(true) jQuery will reinstate the first version loaded and return a reference to the second version loaded:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

(function($){
  // in here $ is the 1.8.1 version

  $(document).ready (function(){

    $('.following').hover(function(){
      $(this).text("Unfollow");
    },function(){
       $(this).text("Following");
    });

    $('.following').click(function(){
      $(this).toggleClass('following follow').unbind("hover");
      if($(this).is('.follow')){
        $(this).text("Follow");
      } else{

        $(this).bind({
          mouseleave:function(){$(this).text("Following");},
          mouseenter:function(){$(this).text("Unfollow");}      
        });
      }
    });
  }); 

}($.noConflict(true)));

// from here on $ is the 1.3.2 version

</script>

If you want to keep a reference to the second version also:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

var $$ = $.noConflict(true);

// from here on $ is the 1.3.2 version and $$ is the 1.8.1 version

(function($){

  // in here $ is the 1.8.1 version

}($$));

</script>

Upvotes: 1

Zarathuztra
Zarathuztra

Reputation: 3251

I don't recommend using noConflict(). It's not really meant for this sort of thing if you look at the jQuery source. I recommend the following:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">var jQueryOld = $old = jQuery</script>
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>

jQuery source for noConflict()

jQuery.noConflict = function( deep ) {
        if ( window.$ === jQuery ) {
                window.$ = _$;
        }

        if ( deep && window.jQuery === jQuery ) {
                window.jQuery = _jQuery;
        }

        return jQuery;
};

Basically you'll still end up with two objects named jQuery once all is said and done. Additionally, to use this with jQuery you have to say jQuery.noConflict(true), and if you read the docs:

"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."

Upvotes: 0

sergio
sergio

Reputation: 5260

Yes, it's doable due to jQuery's noconflict mode. http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

Upvotes: 0

Related Questions