Javascript in asp.net masterpage head content seems not working

Question

I'm using a ready made jquery date picker with ASP.NET text boxes. I'm also using MasterPage so here's what I've done so far -

Page linked to Master Page

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="overcast/jquery-ui-1.8.15.custom.css" rel="Stylesheet" type="text/css" />
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script>
    $(function () {
        $("#txtBeginDate").datepicker();
        $("#txtEndDate").datepicker();
    });
</script>
</asp:Content>

Two text box controls

<asp:TextBox ID="txtBeginDate" runat="server"  Placeholder="Select Begin Date"></asp:TextBox> to 
<asp:TextBox ID="txtEndDate" runat="server"  Placeholder="Select End Date" />

But when I place cursor into these text boxes, the date picker doesn't show.

Please advice.

have you checked for any js errors? are the paths specified correct? — Rafay
– Rafay, Commented Mar 26, 2012 at 6:49
getfirebug.com for FireFox or chrome it has its own set of developer tools — Rafay
– Rafay, Commented Mar 26, 2012 at 6:53

Chris Herring · Accepted Answer · 2012-03-26 06:54:03Z

3

By default ASP WebForms generates a unique client id for each control which includes any parent ids. So the id may end up as something like "ct100_ct101_txtBeginDate".

Try using the Client ID with inline code like:

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

answered Mar 26, 2012 at 6:54

Chris Herring

3,6553 gold badges37 silver badges51 bronze badges

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

Comments

Rafay · Accepted Answer · 2012-03-26 07:00:02Z

3

As @Chris mentioned in his answer the generated ids could be different in ASP.Net web forms server controls, if you are using .net4 set the ClientIDMode="Static" that way you can use your own ids

<asp:TextBox ID="txtBeginDate" runat="server" ClientIDMode="Static"  Placeholder="Select Begin Date"></asp:TextBox> to 
<asp:TextBox ID="txtEndDate" runat="server" ClientIDMode="Static" Placeholder="Select End Date" />

answered Mar 26, 2012 at 7:00

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Comments

rikitikitik · Accepted Answer · 2012-03-26 07:05:19Z

0

As Chris said, the actual control ID will be a whole lot different when it is rendered. If you want to stick with JQuery, you can use the known part of the control ID, because it will always be at the end of the actual ID, as an Attribute Ends With Selector:

$(function () {
        $("input[id$=txtBeginDate").datepicker();
        $("input[id$=txtEndDate").datepicker();
    });

answered Mar 26, 2012 at 7:05

rikitikitik

2,4802 gold badges28 silver badges39 bronze badges

Collectives™ on Stack Overflow

Javascript in asp.net masterpage head content seems not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related