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:

@* 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.