Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery plugins occupy the same function name -> conflict

I've ran into a problem using jquery expose plugin alongside Masked Input plugin. The problem is they both occupy $.mask function which leads to conflict. But I vitally need this two plugins to work together. I would rename $.mask in one of them to... let's say, $.msk, but in this case I'll always need to remember it and if I want to upgrade to new version, I will rename again.

Looking for better solution on how to cope with this kind of conflicts between jquery plugins.

like image 209
Nemoden Avatar asked Apr 21 '11 07:04

Nemoden


People also ask

How to avoid conflict between two jQuery?

If we are using two different frameworks with the same shortcut $ then one of them stops working due to conflict so to avoid the conflict between the two frameworks. we use $. noConflict() method.

How can you avoid the in jQuery from clashing with the same name used by some other JS library?

Thus, if you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.

Is not a function error jQuery?

on if not a function" jQuery error occurs for 2 main reasons: Loading an old version of the jQuery library that doesn't support the on function. Loading a library that overrides the value of the dollar sign $ variable.


2 Answers

I think you have a choice between solutions that require you to remember something, the question is how often do you want to remember.

If you rename one of them then you have to remember to patch any upgrades. I don't think this is such a big deal, it happens all the time in software development.

An alternative is to pull in one of the plugins and then immediately load a namespace patcher that simply does, for example, jQuery.fn.masked_input = jQuery.fn.mask; and then the expose plugin can be loaded after that. This approach will work as long as the renamed plugin doesn't reference its own name anywhere. And, you'd have to remember the specific loading order for your plugins. This sort of thing also occurs all the time in software development.

like image 176
mu is too short Avatar answered Nov 06 '22 11:11

mu is too short


I think I agree with mu's answer. One addition might be to use jQuery.sub().

Since most plugins use the jQuery global during construction, you should be able to alias jQuery before loading one of the plugins. Then you could re-alias afterwards to whatever you choose.

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script> 
<script type="text/javascript">
var jQuery = $.sub();
</script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
var $$$ = jQuery;
jQuery = $;
</script>

The only possible advantage to this approach is that it might isolate one plugin from the changes that another plugin might make to jQuery methods. It's slightly convoluted but the only alternative to altering the plugins, that I can think of.

like image 36
greggian Avatar answered Nov 06 '22 11:11

greggian