CODEWITHSUNDEEP
jqueryasp.netuser-controls
Satish Nissankala
Satish Nissankala

Reputation: 141

jQuery in ASP.NET User Control

I would like to use jQuery in ASP.NET User Control. Can some one tell me how to do it in a right way. I am trying to implement datepicker on a text box. I am new to ASP.NET and jQuery.

Thanks in advance.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Employer.ascx.cs"  Inherits="Employer" %>
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<link href="/Styles/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery.ui.core.js" type="text/javascript"></script>
<script src="/Scripts/jquery.ui.widget.js" type="text/javascript"></script>
<script src="/Scripts/jquery.ui.datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
       $("#SDate").datepicker();
       $("#EDate").datepicker();
    });
</script>
<p>
    Company:<asp:TextBox ID="CBox" runat="server" />
    <asp:RequiredFieldValidator ID="ERVal" runat="server" ErrorMessage="Please Enter The Company Name" ControlToValidate="CBox"></asp:RequiredFieldValidator>
</p>
<p>
Start Date:<asp:TextBox ID="SDate" runat="server" CssClass="DatepickerInput" />
</p>
<p>
End Date:<asp:TextBox ID="EDate" runat="server" CssClass="DatepickerInput" />
</p>
<p>
Pay:<asp:TextBox ID="PayBox" runat="server" />
</p>
<p>
Role:<asp:DropDownList ID="RLBox" runat="server" >
    <asp:ListItem Text="Admin" Value="Admin" />
    <asp:ListItem Text="Employer" Value="Employer" />
</asp:DropDownList>
</p>

Upvotes: 1

Views: 7968

Answers (3)

Steve Wellens
Steve Wellens

Reputation: 20620

Try this:

$("input[id$=SDate]").datepicker();
$("input[id$=EDate]").datepicker();

I got it to work on my box. The dollar sign is a type of wild card attribute selector...any IDs that end with the text.

Upvotes: 1

Devjosh
Devjosh

Reputation: 6496

replace you script block with 

<script type="text/javascript">
    $(document).ready(function () {
       $(".DatepickerInput").datepicker();

    });
</script>

Upvotes: 1

Jack
Jack

Reputation: 8941

If you look at your rendered html you'll see that the IDs have changed. This is a part of webforms.

Try:

$("#<%= SDate.ClientID %>").datepicker();

Upvotes: 1

Related Questions