Problem using both Prototype and jQuery in the same page

Question

I have a conflict when I use a jquery script for inline window and prototype to toogle a menu. When I use one of the two is working properly. However when I use them both, only the prototype works. I read about a jquery.noconflict but I can use it correctly. Those are the scripts.

here is my jquery script ( inline window )

<script type="text/javascript">

$(document).ready(function(){

    //When you click on a link with class of poplight and the href starts with a # 
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Get Popup href to define size

        //Pull Query & Variables from href URL
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //Gets the first query string value

        //Fade in the Popup and add close button
        $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');

        //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;

        //Apply Margin to Popup
        $('#' + popID).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        //Fade in Background
        $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 

        return false;
    });


    //Close Popups and Fade Layer
    $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();  
    }); //fade them both out

        return false;
    });


});

</script>

and this is my prototype script

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>  

<script type="text/javascript">  
// <![CDATA[  
// Making sure this code only executes when the document is loaded: this makes the DOM available to us  
Event.observe(document, 'dom:loaded', function() {  

    // for every element with an toggler class...  
    $$('.toggleExample').each(function(element) {  

        // we put on an event listener of the click type  
        Event.observe(element, 'click', function(event){   

            // We stop the default link behaviour  
            Event.stop(event);  

            // when clicked, traverse the DOM: 1 step up (from it's A-element to it's container DIV-element),   
            // and select its following sibling (next(0)), and toggle that shit.  
            Event.element(event).up(0).next(0).toggle();  

        }, false);  

    });  

});  
// ]]>  
</script>

If it were mine, I'd convert the Prototype menu toggle function to jQuery and be done with it. — Sparky
– Sparky, Commented Jun 7, 2011 at 22:50
Well this is a work around, but I builted already. I will go for it if i don't get the solution — EnexoOnoma
– EnexoOnoma, Commented Jun 7, 2011 at 22:52
Maintaining one library, less conflicts, less JS code to load, etc... you'll be happier when you do. — Sparky
– Sparky, Commented Jun 7, 2011 at 22:55
I tried all the three answers and didn't get it working. I am going with jquery — EnexoOnoma
– EnexoOnoma, Commented Jun 7, 2011 at 22:59

Dr.Molle · Accepted Answer · 2011-06-07 22:58:43Z

5

Put this right after the embedded jquery.js:

<script  type="text/javascript">
$.noConflict();
</script>

And change this line:

$(document).ready(function(){

to

jQuery(document).ready(function($){

edited Jun 7, 2011 at 22:58

answered Jun 7, 2011 at 22:44

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

system PAUSE Over a year ago

O_o ...so the $ in $(document).ready will now be interpreted by Prototype? And will Prototype handle it as expected?

Dr.Molle Over a year ago

No, when using $.noConflict() the global variable $ pointing to jQuery will be discarded, so the $ can be used by another library. The function in document.ready() always will be supplied with an argument, jQuery itself, so using the code above the $ will be a local variable now. Please note the edit, there was an mistake, it has to be jQuery(document) instead of $(document)

system PAUSE Over a year ago

Ah, I see your edit. The '$' token in the global scope must be replaced by a 'jQuery' token. That's what had me confused.

Grekz Over a year ago

You can use the simplified way for jQuery(document).ready(function($){ you could use jQuery(function($){

cwallenpoole · Accepted Answer · 2011-06-07 22:44:42Z

2

First load jQuery and then call

jQuery.noConflict(); 
//if loaded first, you could also use $.noConflict(), 
//but consistency is a good thing

Then continue loading the rest of your stuff (including Prototype, custom scripts, etc).

Finally (and this pertains to your first example above) use the function jQuery where you would normally use $.

Your basic problem is that $ is used by both Prototype and jQuery as a reference to another function. Unfortunately, Prototype more or less requires its $ definition, which means that once its loaded, nothing else should name itself $. jQuery's noConflict method gets rid of the $ method to prevent this problem.

answered Jun 7, 2011 at 22:44

cwallenpoole

82.4k26 gold badges132 silver badges174 bronze badges

Comments

Grekz · Accepted Answer · 2011-06-07 23:11:19Z

2

1.- Load jQuery library. 2.- Do your jQuery stuff 3.- Load Prototype library 4.- Do your Prototype stuff

You should use the noConflict function on jQuery, your jQuery stuff should start this way:

<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){

    //All my jQuery stuff

});
</script>

If you need more info check the jQuery API http://api.jquery.com/jQuery.noConflict/

edited Jun 7, 2011 at 23:11

answered Jun 7, 2011 at 22:45

Grekz

1,59115 silver badges22 bronze badges

Collectives™ on Stack Overflow

Problem using both Prototype and jQuery in the same page

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related