help with resolving conflict between two JS libraries

[webguync]

I am having some problems with a page I am working on that utilizes JQuery and MooTools. The JQuery is used on a sliding menu and the Moo Tools is used as a form field checker. i can get one or the other to work, but not both. I did some research at found you can invoke some no conflict code, but what I have tried so far isn't working. My configuration is below.

 

<?php require('../includes/JQuery.php'); ?>//this is where I have all of my JQuery scripts.
<script type="text/javascript">//this initializes the slider for the menu
       jQuery.noConflict();//trying the no conflict
   $(document).ready(function () {
    $('img.menu_class').click(function () {
$('ul.the_menu').slideToggle('medium');
    });
});
    </script>

<script type="text/javascript" src="../js/mootools.js"></script>

 

as the code is now, the MooTools feature works, but the JQuery does not. I also tried moving the MootTools call above the JQuery call and that enables the JQuery slide to work, but then the MooTools effect doesn't work.

[.josh]

you need to assign the .noConflict() to a variable like

 

var $someVar = jQuery.noConflict();
$someVar(document).ready(function () {
// etc...now use $someVar instead of $ everywhere that you use $ for jQuery

[trq]

Ive never had to use the no conflict option of jQuery (because I stick jQuery alone) but I think once you have done so, you need to refer to jQuery from then on in as jQuery and not $.

[webguync]

still a little confused on this. Taking the following code, what would I need to do so that it won't conflict with other JQuery code or other JS libraries.

 

$(document).ready(function () {
    $('img.menu_class').click(function () {
$('ul.the_menu').slideToggle('medium');
    });
});

[.josh]

you do what I showed you in my post... assign the noconflict to a variable and use $yourvariable instead of $ and I gave an example using your first line of code...

[webguync]

well as I interpret this is what I need to do.

 

var $jq = JQuery.noConflict();
$jq(document).ready(function () {
    $jq('img.menu_class').click(function () {
$jq('ul.the_menu').slideToggle('medium');
    });
});

 

but on a page I have a JQuery slider menu (the code above), the menu doesn't work on the same page as a form which also uses the mootools.js library to submit data.

 

one or the other works but not both.

 

[webguync]

this does seem to work when you have several JQuery scripts running on a page, just not with another library. I will search more into how to do that.

[camaleonw]

It worked!! thank you Crayon Violent I was having the same problem and don't know much about coding, Regards!

[ignace]

You can keep using $ if you use self-invocation.

 

(function($) { /* use $ without fear */ }); })(jQuery);