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 plugin name conflict - mask custom

jquery.maskedinput.js: also has a mask function.

jquery plugin name conflict - mask input

_Layout.cshtml

jquery plugin name conflict

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.

existing code broken due to jquery plugin name conflict

error due to jquery plugin 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")

jquery plugin name conflict - solution

contactus.js: now I can use mask functions of both the plugins without any conflict as shown below:

jquery plugin name conflict - solutions rename

That’s it.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *