Prototype.js conflicts with jquery

Hi there,
I have a problem running prototype.js with jquery at the same project.!! In other words, they conflict with each other. I have read a lot before I post this here and I know that jquery offers the no.conflict() function but I couldn’t use that simple code with my actual scripts. I have no idea how to use JS so I need you to help me to fix that code to make it working please.

Here is my code snippet:

<script src="scripts/validator/prototype.js" type="text/javascript"></script>
<script src="scripts/validator/validation.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="scripts/validator/validator.css" />

<script src="scripts/jquery.js" type="text/javascript" language="javascript"></script>
<script src="scripts/check_names.js" type="text/javascript" language="javascript"></script>

<script>
     var $j = jQuery.noConflict();

     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j("username").hide();
     });

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

Any help would be appreciated in advance,
Regards,

The $ var is a method of the prototype library, simply change $j to j and it will work fine

I changed it but it didn’t work with me :frowning:
<script>
var j = jQuery.noConflict();

 // Use jQuery via $j(...)
 j(document).ready(function(){
   j("username").hide();
 });

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

</script>

Look at your code again, the difference between jQuery and the Prototype libraries is that jQuery supports both ID’s and classes. The code you have should be

var j = jQuery.noConflict();
     
// Use jQuery via $j(...)
j(document).ready(function(){
    j("#username").hide(); // ID Selector
    j(".username").hide(); // Class Selector
});
     
// Use Prototype with $(...), etc.
$('someid').hide();

Also if you dont want to continue using j through document ready codes or anything to do with jQuery you can do this for example

j(document).ready(function($){
    $('#username').hide();
});

OR the below if your loading your scripts before the </body> tag

function($){
    $('#username').hide();
})(jQuery);

Sorry found a mistake in the last code, should be

(function($){
    $('#username').hide();
})(jQuery);

$ is also simply a shortcut in the jQuery library too. Prototype may depend on it, I don’t know, but the worst case scenario is that you write prototype code the way it recommends and write the jQuery object explicitly rather than through the $ shortcut, i.e.

jQuery(document).ready(function (){
jQuery(“.username”).hide();
});

It requires an extra five characters, but is utterly reliable which is critical in a situation like yours where you have multiple JS libraries fighting over $.