conrad2010

asked on 7/10/2011

problem with JQuery DateTime picker in ASP.NET UserControl

when implementing a JQuery DateTime picker in ASP.NET using this code:

$(document).ready(function () {
$(".<%= DepartDate.ClientID %>").datepicker();
$(".<%= ReturnDate.ClientID %>").datepicker();
});

works fine in an ASP.NET .aspx page... when I try and implement the same on a UserControl, I get this error:

Name 'DepartDate' is not declared.
Name 'ReturnDate' is not declared.

this builds upon a previous entry located here:

https://www.experts-exchange.com/questions/27188534/JQuery-DatePicker-in-ASP-NET.html

JavaScriptASP.NETAJAX

Last Comment

conrad2010

8/22/2022 - Mon

leakim971

7/10/2011

The dot is the class selector

Using the UserControl :

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<asp:TextBox ID="TextBox1" class="DepartDate" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" class="ReturnDate" runat="server"></asp:TextBox>

Open in new window

Test page :

<%@ Page Title="Page d'accueil" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="uc" TagName="Travel"  Src="WebUserControl.ascx" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $(".DepartDate,.ReturnDate").datepicker();
    });
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<uc:Travel id="Travel1" runat="server" MinValue="1" MaxValue="10" /><br />
<uc:Travel id="Travel2" runat="server" MinValue="1" MaxValue="10" /><br />
<uc:Travel id="Travel3" runat="server" MinValue="1" MaxValue="10" /><br />
<uc:Travel id="Travel4" runat="server" MinValue="1" MaxValue="10" />
</asp:Content>

Open in new window

leakim971-477307.flv

conrad2010

7/10/2011

ASKER

I see you're using the UserControl a little different and I checked and what I'm using is a Web User Control (not sure if tha't all that different)

this is what I have in ucHotelQuotebox.ascx:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="uc_Hotel_QuoteBox.ascx.vb" Inherits="controls_uc_Hotel_QuoteBox" %>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript">

$(document).ready(function () {
$("#<%= DepartDate.ClientID %>").datepicker();
$("#<%= ReturnDate.ClientID %>").datepicker();
});

      </script>

<input id="DepartDate" name="DepartDate" class="DepartDate" type="text" style="width:75px; height:16px; font-size:10px; font-family:Arial; background:url(bg_form_calendar.gif) top left no-repeat; color:#666666; border: 0px; padding-left:3px;" />

<input id="ReturnDate" name="ReturnDate" class="ReturnDate" type="text" style="width:75px; height:16px; font-size:10px; font-family:Arial; background:url(bg_form_calendar.gif) top left no-repeat; color:#666666; border: 0px; padding-left:3px;" />

and these are the errors:
Name 'DepartDate' is not declared.
Name 'ReturnDate' is not declared.
'DepartDate' is not declared. It may be inaccessible due to its protection level.
'ReturnDate' is not declared. It may be inaccessible due to its protection level.

conrad2010

7/10/2011

ASKER

and I get the same error whether I am using the class selector (with a dot) or the div selector using #

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!

Walt Forbes

leakim971

7/10/2011

don't put the javascript part in the user control

ASKER CERTIFIED SOLUTION

leakim971

7/10/2011

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

conrad2010

7/10/2011

ASKER

put it all in the master page, same problem...

leakim971

7/10/2011

use the class not the id

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

conrad2010

7/10/2011

ASKER

tried that also... same errors...

leakim971

7/10/2011

All the codes I have provided works. Not sure what you miss if you don't post your full code

conrad2010

7/10/2011

ASKER

in the <head> of the master template:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript">

$(document).ready(function () {
$("#<%= DepartDate.ClientID %>").datepicker();
$("#<%= ReturnDate.ClientID %>").datepicker();
});

</script>

on the ascx we control page we only have this:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="uc_Hotel_QuoteBox.ascx.vb" Inherits="controls_uc_Hotel_QuoteBox" %>

<input id="DepartDate" name="DepartDate" class="DepartDate" type="text" style="width:75px; height:16px; font-size:10px; font-family:Arial; background:url(bg_form_calendar.gif) top left no-repeat; color:#666666; border: 0px; padding-left:3px;" />

<input id="ReturnDate" name="ReturnDate" class="ReturnDate" type="text" style="width:75px; height:16px; font-size:10px; font-family:Arial; background:url(bg_form_calendar.gif) top left no-repeat; color:#666666; border: 0px; padding-left:3px;" />

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

conrad2010

7/10/2011

ASKER

correction on the master template:

$(".<%= DepartDate.ClientID %>").datepicker();
$(".<%= ReturnDate.ClientID %>").datepicker();

leakim971

7/10/2011

You're still using ID ( mean the use of ClientD ) instead class

It will not work
Check my code I used :
class="ReturnDate" and class="ReturnDate"

conrad2010

7/10/2011

ASKER

yes, I didn't catch that... ok, with this change I am able to "Rebuild Website" without any errors... when I try and publish it gives these 2 errors:

'DepartDate' is not declared. It may be inaccessible due to its protection level.
'ReturnDate' is not declared. It may be inaccessible due to its protection level.

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

leakim971

7/10/2011

use this and only this : $(".DepartDate,.ReturnDate").datepicker();
If you still have this message, I think you get this message from you code behind...

conrad2010

7/10/2011

ASKER

to confirm: that's indeed what I used: $(".DepartDate,.ReturnDate").datepicker();

and there is currently no code behind for the web user control...

and the error only shows when publishing, not when rebuilding, which seems strange...

conrad2010

7/10/2011

ASKER

I rebuilt my usercontrol to match your example, works great... thanks!

Your help has saved me hundreds of hours of internet surfing.

fblack61