JQuery plugin not working

I have a JQuery date mask, but when I run the page it throws an error "Microsoft JScript runtime error: Object doesn't support this property or method".

Now, the control that this particular JQuery is meant to be working is added dynamical开发者_如何学运维ly to a repeater control. Through this, I have looked at the ids of the control, where it was breaking and stopping in Visual Studio and what is being shown on the aspx page. The ids are identical except of the "#" that JQuery has at the start, which is not on the page.

In my JQuery code I have:

JQuery(function ($) {

$('#<%=date.ClientID %>').mask("99/99/9999");

});

Is there away to tell JQuery not to include the "#" when finding the control? I have used UniqueID but this changes any underscore into "$", which is not the same as what is on the page. My only problem is with "#" sign at the start of the ID. I have even added an alert box to check that textbox was there and it came back as null. I have tried even adding a CssClass attribute to the textbox, but this through the same error, too.

Please note that the custom user control that has the textbox is added programatically to the repeater.

Code below:

User control with repeater

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Step4.ascx.cs"
    Inherits="Prototype.Step4" %>
<div style="height: 800px; margin-top: 20px; overflow-x: hidden; overflow-y: scroll">
    <p>
        <b>Edit Stage</b></p>

    <asp:Repeater ID="Edit" runat="server">
        <HeaderTemplate>
            <table>
        </HeaderTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <asp:Label ID="RowLabel" runat="server" Text="Label" ></asp:Label>
                </td>
                <td>
                    <asp:PlaceHolder ID="ControlPlaceHolder" runat="server"></asp:PlaceHolder>
                </td>
            </tr>
        </ItemTemplate>
    </asp:Repeater>
</div>

Mask Control that is added dynamically to the control above

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MaskControl.ascx.cs" Inherits="Prototype.CommonControls.MaskControl" %>


<asp:TextBox ID="date" runat="server" Width="136px" CssClass="dateMask"></asp:TextBox>


<script src="../../Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.maskedinput.js" type="text/javascript"></script>

<script type="text/javascript">
//    jQuery(function ($) {
//        $('.dateMask').mask("99/99/9999");
//    });
    alert(document.getElementById("MaskedDateBox"));
</script>

Can anyone help?

---

have you tried using:

$(document).ready(function() { $(.dateMask).mask("99/99/9999"); });

Adding the usercontrol dynamically won't change the css class of the added controls, where it will change the id based on it's naming container.

---

jQuery(function() {
    jQuery('.dateMask').mask("99/99/9999");
});

should work.

I am not really sure what do you mean by:

tell JQuery not to include the "#" when finding the control

When you use # in a selector it means find control by id.

It is cleaner to get asp.net controls using a class selector rather than id selector, IMHO.

So to expand on the explanation a bit. If you are not using ajax then it doesn't matter how did you generate your controls - all your text boxes are present on the page when $(document).ready() event fires, and have their classes set. In that case you need to run the following code only once (that is put the js on the page and not in the control)

jQuery(function() {
    jQuery('.dateMask').mask("99/99/9999");
    jQuery('.phoneMask').mask("(999) 999-9999");  // if you have one
    ...
});

If you are loading the controls using ajax than you have to run the javascript code above each time ajax request completes. You can do that by registering a script with ScriptManager on in Page_Load like this:

public void Page_Load(object sender, EventArgs e) {
    ScriptManager.RegisterStartupScript(updatePanel, updatePanel.GetType(), "mask", "initMask();", true);
}

You'll have to define the initMask() javascript function on your page.

function initMask() {
    jQuery('.dateMask').mask("99/99/9999");
    jQuery('.phoneMask').mask("(999) 999-9999");  // if you have one
    ...
}