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

Question

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?

George Wilson · Accepted Answer · 2012-11-05T16:52:54.070

3

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

edited Nov 05 '12 at 16:52

answered Nov 05 '12 at 15:03

George Wilson

5,595
5
29
42

OK...that helps me somewhat. I am very much a novice at jQuery and JavaScript as a whole, and so wondering how much work this is? If I have to go through every .js file and make those modifications throughout each file, it will take forever, since there are about 7 .js files and a few of them are over 1000 lines long. Would you have any advice George? – Ali Samii Nov 05 '12 at 15:07
You shouldn't need to replace every instance of $! You put the `(function($){` at the top and the `})(jQuery);` at the bottom of each of the jquery plugin files. And put the `jQuery.noConflict();` at the bottom of the main jquery file – George Wilson Nov 05 '12 at 15:59
Won't that restrict the scope of any functions that may potentially be being used later? – Reinstate Monica Cellio Nov 05 '12 at 16:19
No. All it should do is state that the $ symbol is being used to represent the jQuery alias. – George Wilson Nov 05 '12 at 16:23
George, please see my own answer to my question. It was too long for a comment. – Ali Samii Nov 05 '12 at 16:41
I've updated my answer in response as my answer was also too long :-) – George Wilson Nov 05 '12 at 16:53
OK. Great. Last question regarding locally hosting jQuery. Would I simply add the line `jQuery.noConflict();` at the very bottom of the jQuery.js file and then minify it? I am using a pre-processor (CodeKit). – Ali Samii Nov 05 '12 at 17:20
Oh, and how would I modify the mootools as per your suggestion above? – Ali Samii Nov 05 '12 at 17:23
And yes literally put it at the very bottom of the jQuery.js file and minify.The way we're doing it now should make mootools ok I think. I'd leave it unless it becomes an issue. – George Wilson Nov 05 '12 at 18:25
Just reading back through this - I probably should explain why. As jQuery is no longer being referenced by the $ symbol (unless being respecified by the code we used) then the mootools is the only library using the $ symbol. The only way mootools would become an issue is if you used some other library/plugin etc. which also redifined the $ variable. However as this isn't the case on your website. There should be no issue with mootools! – George Wilson Nov 06 '12 at 08:46

score 0 · Answer 2 · answered Nov 05 '12 at 14:49

0

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

<script>

      jQuery.noConflict();

// Use jQuery via jQuery(...)

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

    </script>

answered Nov 05 '12 at 14:49

defau1t

10,593
2
35
47

Where would I put that? At the start of the testify.js file? At the top of each and every .js file referenced above that is conflicting? Or at the point where I am importing the jQuery.min.js file from the CDN? – Ali Samii Nov 05 '12 at 14:54
before the start of your js code. You should also replace the $ instance in your jquery code with jQuery – defau1t Nov 05 '12 at 15:07
As I replied to George above, I am very much a novice at jQuery and JavaScript as a whole, so I really would appreciate a bit of hand-holding. – Ali Samii Nov 05 '12 at 15:11
I think it is just a copy and paste. and replacing $ with jQuery. – defau1t Nov 05 '12 at 15:43

score 0 · Answer 3 · answered Nov 05 '12 at 16:40

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

(function($){

at the top and the

})(jQuery);

at the bottom of every jQuery plugin and that I should add

jQuery.noConflict();

at the bottom of the main jQuery file.

What I did seems to work, but maybe it isn't a best practice way of doing things.

Also, how do I add

jQuery.noConflict();

to a CDN hosted copy of jQuery?

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

3 Answers3

Linked