CODEWITHSUNDEEP
jqueryprototypejs
Saulius Antanavicius
Saulius Antanavicius

Reputation: 1381

jQuery and prototype.js conflict, how to keep jQuery as $?

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 $?

Upvotes: 8

Views: 12693

Answers (5)

Ashutosh Srivastav
Ashutosh Srivastav

Reputation: 669

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/

Upvotes: 0

PeeHaa
PeeHaa

Reputation: 72672

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

Upvotes: 10

marue
marue

Reputation: 5726

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.

Upvotes: 0

rgin
rgin

Reputation: 2311

( function($){
   // $('jquery here')
})(jQuery);

All jquery code inside the function can use $.

Upvotes: 2

Elliot Bonneville
Elliot Bonneville

Reputation: 53311

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.

Upvotes: 6

Related Questions