8

So I'm working on a website that uses both jQuery and prototype.js, however their conflicting.

I've researched a fair bit and found that the only way people fix this issue is by using

<script>
 jQuery.noConflict();

 // Use jQuery via jQuery(...)
 jQuery(document).ready(function(){
   jQuery(\"div\").hide();
 });

 // Use Prototype with $(...), etc.
 $('someid').hide();

However I don't want to change $ to jQuery as that means I'd have to edit a fair bit of pre written code. Is there a way to stop them conflicting and leave jQuery as $?

Saulius Antanavicius
  • 1,371
  • 6
  • 25
  • 55
  • Are you asking if you could have, in the same scope, $ mean two different things? – Iznogood Apr 05 '12 at 19:47
  • 1
    He's asking if there's a Prototype version of `noConflict()`. – Elliot Bonneville Apr 05 '12 at 19:48
  • possible duplicate of [jQuery & Prototype Conflict](http://stackoverflow.com/questions/134572/jquery-prototype-conflict) – jrummell Apr 05 '12 at 19:49
  • If all of your jQuery is inside of a `$(document).ready(function(){`, you could use `jQuery(document).ready(function($){` and safely use `$` inside of it. – Kevin B Apr 05 '12 at 19:54
  • Why not eliminate one of the libraries? A programmer shouldn't need both. That said, change `jQuery(document).ready(function(){` to `jQuery(document).ready(function($){`, and you're set. –  Apr 05 '12 at 19:57

5 Answers5

10

Instead of using document ready you can create a closure (at the end of the body) like:

(function($) {
  //jQuery stuff
  $('.elem') // $ refers to jQuery
})(jQuery);

If I understand your question correctly

PeeHaa
  • 71,436
  • 58
  • 190
  • 262
  • Decided to go with this, however annoyingly prototype.js is showing an error now.. – Saulius Antanavicius Apr 05 '12 at 19:57
  • I don't know what @Elliot's original comment was, but I don't see how your IIFE is a replacement for jQuery's `.ready()`. And saying: *"Instead of using document ready you can create a closure..."* doesn't really make sense. The `.ready()` callback is no less of a closure than what you have. –  Apr 05 '12 at 20:05
6

Nope, not that I've heard of. To minimize code conversion pain you could do something like this though:

var j$ = jQuery.noConflict();

You could then replace jQuery $ calls with j$. You could probably even use a simple search/replace call.

Elliot Bonneville
  • 51,872
  • 23
  • 96
  • 123
2
( function($){
   // $('jquery here')
})(jQuery);

All jquery code inside the function can use $.

rgin
  • 2,291
  • 4
  • 24
  • 32
0

There is a simple way to do this by wrapping your allready written code into a function and pass jQuery into it. That way you can keep your allready written code and use jQuery as identifier only for the new one:

(my_old_stuff = function($){
   $.my_existing_function(){
       alert('i allready exist');
   };
)(jQuery);

jQuery.my_existing_function();

That should work.

On the other hand: replacing $ with jQuery doesn't seem to be that much of a task for automatic replacement.

marue
  • 5,588
  • 7
  • 37
  • 65
0

Though it's quite an old post but I exactly had the same problem scenario. There are a lot of options available to handle it. I wouldn't touch the pre-written code and let prototype js use $.

From the jQuery documentation

<!-- Loading jQuery before other libraries. -->
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>

// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
    jQuery( "div" ).hide();
});

// Use the $ variable as defined in prototype.js
window.onload = function() {
    var mainDiv = $( "main" );
};

</script>

Here are all the options available.

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Ashutosh Srivastav
  • 649
  • 7
  • 11