Example of using jQuery noConflict on 2 jQuery plugins

Question

I'm looking for a jQuery noConflict example that shows 2 jQuery plugins in the same code snippet and how to use jQuery.noConflict so that these plugins should function. Where would it apply in the scenario below?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://example.com/jquery.plugin_1.js"></script>
<script type="text/javascript" src="http://example.com/jquery.plugin_2.js"></script>

<script type="text/javascript">    
$(document).ready(function() {
    // plugin_1 code...
}
</script>

<script type="text/javascript">    
$(document).ready(function() {
    // plugin_2 code...
}
</script>

No, I'm running a Joomla site which implements jQuery and various plugins. Anytime I introduce a custom jQuery plugin, the new plugin fails to work unless I implement improper workarounds (e.g. re-calling the same jquery file right before the new plugin use) — Clayton, Jul 27 '15 at 17:40
Just see if the link http://stackoverflow.com/questions/7882374/how-do-i-implement-jquery-noconflict helps! — Varun, Jul 27 '15 at 17:42
The purpose of noConflict is to allow jQuery to run alongside another library that uses `$` as a function or variable name, it's not meant to resolve conflicts between jQuery plugins. — j08691, Jul 27 '15 at 19:11
Oh! Now I understand. Well, my answer below still allows my plugins to finally work because they are now properly escaping conflict with whatever other library that was utilizing `$`. — Clayton, Jul 27 '15 at 19:14

score 1 · Answer 1 · answered Jul 28 '15 at 13:27

Most Joomla installations also come bundled with MooTools, which uses $ and $$ along with jQuery which uses $. This sounds like the issue you are experiencing. However both frameworks also have their own global variables you can use. For MooTools it is document.id, for jQuery it is jQuery. As a general rule closures help out a great deal with compatibility issues with plugins. You can opt to fix the plugins by using the closures or wrap your $(document).ready() with them. I personally do both.

jQuery https://api.jquery.com/jquery.noconflict/

(function($){
   //jQuery code here
}(jQuery));

MooTools http://mootools.net/blog/2009/06/22/the-dollar-safe-mode

(function($){
   //MooTools code here
}(document.id));

The same issue can occur with a number of global values/variables, for example the usage of some plugins overriding undefined.

var undefined = null;
var isDefined = (typeof myVar === undefined);

score 0 · Answer 2 · answered Jul 27 '15 at 19:08

This application of jQuery noConflict worked for me:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://example.com/jquery.plugin_1.js"></script>
<script type="text/javascript" src="http://example.com/jquery.plugin_2.js"></script>

<script type="text/javascript">
var $plugin_1 = jQuery.noConflict();
$plugin_1(document).ready(function() {
    // replace "$" with "$plugin_1" in all instances of its use here.
    // plugin_1 code...
}
</script>

<script type="text/javascript">
var $plugin_2 = jQuery.noConflict();
$plugin_2(document).ready(function() {
    // replace "$" with "$plugin_2" in all instances of its use here
    // plugin_2 code...
}
</script>

Example of using jQuery noConflict on 2 jQuery plugins

2 Answers2