How to debug what appears to be a jQuery/MooTools conflict?

问题

I am attempting to implement a jQuery plugin called Textify which I purchased on CodeCanyon.

Textify requires jQuery, and I am implementing this plugin in a Joomla 2.5 environment using the Vertex framework from Shape5.

After integrating the plugin into the site, I am getting 5 "'undefined' is not a function" errors.

The dev site is located at http://sosdivorce.ergonomiq.net

As Textify is a commercial product, I don't feel comfortable posting the script online.

The specific errors I am getting are as follows:

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/multibox/overlay.js

    Type Issue
    'undefined' is not a function (evaluating '$(window).addEvent('resize',function(){s5_resize_overlay();});')

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/s5_info_slide.js

    Type Issue
    'undefined' is not a function (evaluating '$(window).addEvent('resize',function(){s5_is_tobind();});')

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/s5_responsive_mobile_bar.js

    Type Issue
    'undefined' is not a function (evaluating '$(window).addEvent('resize',s5_responsive_mobile_login_register);')

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/s5_columns_equalizer.js

    Type Issue
    'undefined' is not a function (evaluating '$(window).addEvent('resize',s5_load_resize_columns);')

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/s5_flex_menu.js

    Type Issue
    'undefined' is not a function (evaluating '$(this.options.id).getElements('li, span.grouped_sub_parent_item');')

How can I investigate this?

回答1:

jQuery and Mootools both use the $ symbol as a short cut for the libraries. My advice would be to look through your jquery code and replace the $ variable and see if that makes a difference. So for example you could disable the $ alias for jQuery completely as soon as you call the jquery library using

// Disable the $ global alias completely
jQuery.noConflict();

And then for jQuery scripts use

(function($){

// set a local $ variable only available in this block as an alias to jQuery
... here is your jQuery specific code ...

})(jQuery);

To be safe I'd also do the same sort of thing to your mootools scripts:

(function($){

// set a local $ variable only available in this block as an alias 
// to Mootools document.id
... here is your Mootools specific code ...

})(document.id);

As your hosting these you may need to add these into your scripts.

EDIT:

There's nothing wrong with editing the scripts the way you have done. Actually best practice would be to design plugins with Joomla noConflict() in mind!

CDN hosting that does make things more complex normally you'd add jQuery in a way such that

<script src="PATH TO GOOGLE ETC" type="text/javascript" />
<script type="text/javascript">
    jQuery.noConflict();
</script>
<script src="PATH TO SCRIPTS" type="text/javascript" />

The issue with this on a joomla site is that joomla will load all file scripts first and THEN add in the handwritten scripts. Whatever order you add them in in. i.e. It will load them like

<script src="PATH TO GOOGLE ETC" type="text/javascript" />
<script src="PATH TO SCRIPTS" type="text/javascript" />
<script type="text/javascript">
    jQuery.noConflict();
</script>

Even if they are inserted the other way around! Hence I suggested the slightly ugly and less well coded way of inserting it into the jQuery file itself. I'd advise locally hosting the jQuery file. It's not the prettiest method ever - or most ideal but it's the only way I know of in Joomla to get around this annoying fact. BUT if you can manually add in the jQuery.noConflict(); in beneath the jQuery before you load the jQuery plugins - this is a much better method

回答2:

Did you try using jQuery.moConflict(); something like below:

<script>

      jQuery.noConflict();

// Use jQuery via jQuery(...)

      // Use Prototype/Mootools with $(...), etc.

    </script>

回答3:

What I did was, I replaced the following code in the include file for the header:

<!-- jQuery Scripts -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<!-- Textify Scripts -->
<script type="text/javascript" src="<?php echo $s5_directory_path ?>/js/textify-min.js"></script>  
<script type="text/javascript">  
    $(document).ready(function (){    
      //Usage  
      $(".longText").textify();     
    });   
</script>

with this code:

<!-- jQuery Scripts -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<!-- Textify Scripts -->
<script type="text/javascript" src="<?php echo $s5_directory_path ?>/js/textify-min.js"></script>  
<script type="text/javascript">  
    jQuery(document).ready(function (){    
      //Usage  
      jQuery(".longText").textify();     
    });   
</script>

George, you said I should add