Using JQuery on ASP.NET User Controls?

Question

I have looked through examples on using JQuery in asp.net user controls and when I try the examples as expressed in forums I still don't get any response from the JQuery.
Can anyone help me with this please? The entire control markup is seen below.
Just in case it is not obvious, I want to implement a filter of the characters accepted into the txtNoteText textbox.

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NotesEdit.ascx.cs" Inherits="InstallationProjectManager.Restricted.NotesEdit" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2011.2.915.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
<script src="<%# ResolveUrl("~/javascript/jquery-1.8.3.min.js") %>" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('<%= txtNoteText.ClientID %>').bind('keypress', function(event) {
            var regex = new RegExp("^[a-zA-Z0-9]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
        });
    });
</script>
<table id="tblNotesEdit" style="border-collapse: collapse; border-spacing: 2px; border: 15px; padding: 1px; width: 100%;">
    <tr>
        <td>
            <table style="margin-left: 10px; width: 100%;">
                <tr><td><asp:HiddenField runat="server" ID="hfNoteID" Value='<%# DataBinder.Eval(Container, "DataItem.ID") %>'/></td></tr>
                <tr><td colspan="2"><h2 class="headerMajor">Add/Edit Job Notes</h2></td></tr>
                <tr>
                    <td class="verticleTableStyle">Note Type:</td>
                    <td>
                        <telerik:RadComboBox ID="cbxNoteType" Runat="server" Enabled='<%# (DataItem is GridInsertionObject) %>' SelectedValue='<%# DataBinder.Eval(Container, "DataItem.NoteTypeID") %>' DataSourceID="dsNoteTypes" DataTextField="Description" DataValueField="ID" Skin="Simple" />
                        <asp:SqlDataSource ID="dsNoteTypes" runat="server" ConnectionString="<%$ ConnectionStrings:InstallationProjectManager.Properties.Settings.conDB %>" SelectCommand="SELECT [ID], [Description] FROM [NoteTypeEnumeration]"></asp:SqlDataSource>
                        <asp:RequiredFieldValidator runat="server" ID="rfvCBXNoteType" EnableClientScript="True" ControlToValidate="cbxNoteType" ErrorMessage="Note type is required to create a note record." InitialValue="Pick One" Display="None" />
                        <ajaxToolkit:ValidatorCalloutExtender ID="vceRFVCBXNoteType" runat="server" TargetControlID="rfvCBXNoteType"/>
                    </td>
                </tr>

                <tr><td class="verticleTableStyle">Note Text:</td><td><telerik:RadTextBox ID="txtNoteText" runat="server" SkinID="LongTextBox" Culture="en-US" Text='<%# DataBinder.Eval(Container, "DataItem.Message") %>' EmptyMessage="Notes" Skin="Simple" Rows="20" Width="90%" Height="50%" TextMode="MultiLine" /></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr>
                    <td colspan="2">
                        <telerik:RadButton ID="btnUpdate" Text="Update" runat="server" Skin="Telerik" CommandName="Update" Visible='<%# !(DataItem is GridInsertionObject) %>'><Icon PrimaryIconUrl="../Images/saveHS.png" /></telerik:RadButton>
                        <telerik:RadButton ID="btnInsert" Text="Insert" runat="server" Skin="Telerik" CommandName="PerformInsert" Visible='<%# DataItem is GridInsertionObject %>'><Icon PrimaryIconUrl="../Images/saveHS.png" /></telerik:RadButton>
                        &nbsp;
                        <telerik:RadButton ID="btnCancel" Text="Cancel" runat="server" Skin="Telerik" CommandName="Cancel" CausesValidation="False"><Icon PrimaryIconUrl="../Images/305_Close_16x16_72.png" /></telerik:RadButton>
                    </td>
                </tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
            </table>            
        </td>
    </tr>
</table>

Thanks.

try to install fire bug for firefox and see if you get any javascripts errors — kleinohad
– kleinohad, Commented Dec 13, 2012 at 14:54
have you tried using a web debugger such as firebug or dragonfly to see if you get any errors? — Antarr Byrd
– Antarr Byrd, Commented Dec 13, 2012 at 14:54

Igor · Accepted Answer · 2012-12-13 14:55:17Z

6

You need to prefix DOM element id with # in jquery selector:

$('#<%= txtNoteText.ClientID %>').bind(...

answered Dec 13, 2012 at 14:55

Igor

15.9k1 gold badge29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

huMpty duMpty · Accepted Answer · 2012-12-13 14:57:21Z

1

Change with #

<script type="text/javascript">
    $(document).ready(function() {
        $('#<%= txtNoteText.ClientID %>').bind('keypress', function(event) {
            var regex = new RegExp("^[a-zA-Z0-9]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
        });
    });
</script>

answered Dec 13, 2012 at 14:57

huMpty duMpty

14.5k14 gold badges64 silver badges102 bronze badges

Collectives™ on Stack Overflow

Using JQuery on ASP.NET User Controls?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related