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.
_Layout.cshtml
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.
Solution:
_Layout.cshtml: all it need is to rename the local copy of mask function of jquery.maskedinput.js as shown below:
|
1 2 3 4 5 6 7 8 9 |
@* New Plugin *@ @Scripts.Render("~/Scripts/jquery.maskedinput.min.js") <script> // rename $.fn.maskedinput = $.fn.mask; delete $.fn.mask; </script> @* Old Plugin *@ @Scripts.Render("~/Scripts/jquery-plugins/custom-extensions.js") |
contactus.js: now I can use mask functions of both the plugins without any conflict as shown below:
That’s it.
