How to use jQuery plugins with conflicting names on the same page in ASP.NET web application
Recently, I have installed a new jQuery plugin (jQuery Masked Input Plugin by Josh Bush) to my application. What I noticed that my existing masking functionality that I have already in place before was broken somehow. Later, I found that there was a name conflict between my existing plugin and the new jQuery Masked Input Plugin that I have installed. Both plugins has same name function “mask“. In this article, we will see how we can solve it.
Problem: Error due to jQuery plugins with conflicting names
custom-extensions.js: has a mask function.
jquery.maskedinput.js: also has a mask function.
contactus.js: which was using existing custom-extensions.js’s mask function to mask date, stopped working after adding new jquery.maskedinput.js plugin due to name conflict.
_Layout.cshtml: all it need is to rename the local copy of mask function of jquery.maskedinput.js as shown below:
@* New Plugin *@
$.fn.maskedinput = $.fn.mask;
@* Old Plugin *@
contactus.js: now I can use mask functions of both the plugins without any conflict as shown below: