Adding a user control containing javascript inside it breaks jquery-ui

Question

I have a user control defined as:

<div>
    <asp:TextBox ID="txtBox" runat="server"></asp:TextBox>
    <asp:CustomValidator ID="validator" runat="server" ControlToValidate="txtBox"></asp:CustomValidator>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#<%= txtBox.ClientID %>').blur(function (event) {
            $('#<%= txtBox.ClientID %>').removeClass('errorTextBoxServer');
            testBox($('#<%= txtBox.ClientID %>'), <%= RegularExpression %>);
        });

        testBox($('#<%= txtBox.ClientID %>'), <%= RegularExpression %>);
    });

    function <%= txtBox.ClientID %>_validateBox(source, args)
    {
        $('#<%= txtBox.ClientID %>').removeClass('errorTextBoxServer');
        args.IsValid = testBox($('#<%= txtBox.ClientID %>'), <%= RegularExpression %>);
    }
</script>

testBox is defined as:

function testBox(thisBox, RegularExpression) {
    if ($(thisBox).val() != "") {
        var regex = new RegExp(RegularExpression);
        var value = $(thisBox).val();
        if (!regex.test(value)) {
            //event.preventDefault();
            $(thisBox).addClass('errorTextBox');
            return false;
        }
        else {
            $(thisBox).removeClass('errorTextBox');
            return true;
        }
    }
    else {
        $(thisBox).removeClass('errorTextBox');
        return true;
    }
}

And it is placed in a web page as follows:

<asp:TextBox ID="txtD1DOB" runat="server" readonly="true"></asp:TextBox>
<wpm:ValidatedTextBox id="txtUpdatedBalance" runat="server" RegularExpression="/^\d{1,3}(,?\d{3})*(\.\d{2,4})?$/" />

Using the following js:

$(document).ready(function () {
    var $j = jQuery.noConflict();
    $j("input[id*='txtD1DOB']").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd/mm/yy",
    });
});

When I run the app js throws the error:

Object doesn't support property or method 'datepicker'

If I remove the user control <wpm:ValidatedTextBox id="txtUpdatedBalance" runat="server" RegularExpression="/^\d{1,3}(,?\d{3})*(\.\d{2,4})?$/" /> then the datepicker works as expected.

I have checked if there are other versions of jquery-ui loading but can't find anything and can't seem to find what would be causing the issue. Any ideas?

EDIT: I tried changing the user control to simply:

<asp:TextBox ID="txtUpdatedBalance" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="txtUpdatedBalance_RegularExpressionValidator" runat="server" ErrorMessage="Invalid value" ControlToValidate="txtUpdatedBalance" ValidationExpression="/^\d{1,3}(,?\d{3})*(\.\d{2,4})?$/"></asp:RegularExpressionValidator>

But the same thing occurs. Removing the RegularExpressionValidator allows everything to work.

EDIT 2: In response to Frebin Francis in the comments the entire head section is:

<head runat="server">
    <meta charset="utf-8" />
    <title><%: Page.Title %> - My ASP.NET Application</title>
    <asp:PlaceHolder runat="server">     
          <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>  
    <webopt:BundleReference runat="server" Path="~/Content/css" /> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <script src="Scripts/wpm_portal.js"></script>
    <meta name="viewport" content="width=device-width" />
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>

It also has a ScriptManager defined as:

<asp:ScriptManager runat="server">
    <Scripts>
        <asp:ScriptReference Name="MsAjaxBundle" />
        <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
        <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
        <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
        <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
        <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
        <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
        <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
        <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
        <asp:ScriptReference Name="WebFormsBundle" />
    </Scripts>
</asp:ScriptManager>

where did you put your jquery ui library ? you need to refer jquery library as well as the jquery ui library for you control. — Frebin Francis, Mar 03 '15 at 04:27
why you are calling asp.net textbox ID as just "txtD1DOB" or like this $('#<%= txtD1DOB.ClientID %>') ? is that how it renders on HTML ? — Frebin Francis, Mar 03 '15 at 10:00
Is there any console errors ? did you add any scripts on the usercontrol page ? — Frebin Francis, Mar 03 '15 at 10:07
I wonder if it has something to do with your use of noconflict in the second onready function. maybe try setting the onready for both like this? http://stackoverflow.com/a/7882412/4597917 — Da Rod, Mar 03 '15 at 21:13
@Frebin - That was a mistyping it is actually `input[id*='txtD1DOB']`. No console errors besides "Object doesn't support property or method 'datepicker'" and no extra scripts added in user control. The user control is basically as you see it above. — anothershrubery, Mar 03 '15 at 23:13
@Da Rod - Removing the noconflict and/or doing like in your example makes no difference. — anothershrubery, Mar 03 '15 at 23:14
@anothershrubery did you check all your needed scripts are loaded using firebug or google console ? — Frebin Francis, Mar 04 '15 at 05:15
Did you encounter any other error aside from "Object doesn't support property or method 'datepicker'" in your console? — Setrákus Ra, Mar 04 '15 at 08:00
As I said above, no other error in console besides "Object doesn't support property or method 'datepicker'". — anothershrubery, Mar 04 '15 at 10:41

score 1 · Answer 1 · answered Mar 08 '15 at 03:55

ASP.NET 4.5 introduced unobtrusive JavaScript for client-side validation. When this feature is enabled (which it is by default), validation controls like CustomValidator automatically include a copy of jQuery from your project's Scripts directory. This copy conflicts with the version of jQuery you're referencing in the <head>.

The easiest way to resolve the problem is to turn off unobtrusive validation, which you can do by adding the following setting to Web.config:

<appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
</appSettings>

If instead you want to use unobtrusive validation, then follow these steps:

Using the NuGet Package Manager, upgrade AspNet.ScriptManager.jQuery to version 2.1.3 and install AspNet.ScriptManager.jQuery.UI.Combined version 1.11.3.
Remove the <script> tags that include jquery.min.js and jquery-ui.min.js from the Google CDN.
Add <asp:ScriptReference> tags for "jquery" and "jquery.ui.combined" to the <asp:ScriptManager> control.

score 0 · Answer 2 · answered Mar 07 '15 at 21:50

Isn't RegularExpression a namespace in .NET, change the variable name to rX or something else.

For compatibility:

Try using the noConflict object outside of the document.ready

Such as:

var $j = jQuery.noConflict();
$j(document).ready(function () {

    $j("input[id*='txtD1DOB']").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd/mm/yy",
    });
});

Do the same for all jQuery related calls.

Adding a user control containing javascript inside it breaks jquery-ui

2 Answers2