JQuery conflict with an other JQuery library

Question

I use jquery for a module. My joomla template have an integrated jquery menu. So they conflict with each other.

Is there a way to solve this problem. Following the s

Answer 1

What you need to do to fix your problem is un-alias the jQuery function and assign it to another variable name (remember: variables can be functions). You need to use the jQuery.noConflict() function to un-alias the $() function. Here one one to do it:

// ...after all of Joomla's JS is done executing...

// before loading your version of jQuery var jquery = {}; // aka new Object()
jquery.joomla = jQuery.noConflict(); // moves jQuery into another namespace

// load your version

Now, when you load your version, it will take over the jQuery and $ namespaces, but you'll still have the other reference to Joomla's jQuery function if you need it. To re-iterate, the basic flow is:

1. Load Joomla's jQuery
2. Run Joomla's jQuery-dependent code
3. Move Joomla jQuery into another namespace
4. Load your jQuery
5. Execute your code using $()

Answer 2

did you mean that your joomla loaded 2 kind of jquery at the same time ? 1st your menu load jquery and then your module load jquery ?

here is the solutions: In joomla templates, we can overriding the module or component views (I assume you must be using joomla 1.5.x right?)

1. in your templates create a directory called html/ eg: templates/yourTemplate/html/

2. copy file from modules/mod_yourMenu/tmpl/.* into your your template html (templates/yourTemplate/html/mod_yourMenu/) --> * you don't need to add tmpl/ *

3. edit the php files inside and delete all tag that load jquery

4. do the step 1-3 for modules that using jquery.

5. edit your template, put tag to load latest version of jquery.

it should work now :)

Answer 3

try

jQuery.noConflict();

e.g

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        var container = jQuery('div.sliderGallery');
         var ul = jQuery('ul', container);

         var itemsWidth = ul.innerWidth() - container.outerWidth();
         jQuery.noConflict();
         jQuery('.slider', container).slider({
             min: 0,
             max: itemsWidth,
             handle: '.handle',
             stop: function (event, ui) {
                 ul.animate({'left' : ui.value * -1},340);
             },
             slide: function (event, ui) {
                 ul.css('left', ui.value * -1);
             }
         });
     });
</script>

I have updated your code to use jQuery to check for document loaded. Details for using the noConflict function is here.

Answer 4

Just to wrap your jq script in a self-invoking function.

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

      $('div').click( function(){ alert('ding'); });

   });
})(jQuery);

This creates a private scope so you don't have to worry about any collisions. You can skip all the uneasyness with the jQuery.noConflict(); solution and you don't have to give up that wonderful $! I do this as a matter of habbit when I know there are other chunks of code at work (eg, any cms) - even if a new extension is added after my testing, it shouldn't break my jQuery.

There's a great overview in the jQuery Cookbook (http://listic.ru/jQuery_Cookbook.pdf - chapter 1.17). If it's good enough for Resig, I guess it will work for me!

Answer 5

try

var J = jQuery.noConflict();

after that use J variable instead of $ or jQuery for your custom code