Avatar of conrad2010
conrad2010
 asked on

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

Avatar of undefined
Last Comment
conrad2010

8/22/2022 - Mon
leakim971

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

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

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

don't put the javascript part in the user control
ASKER CERTIFIED SOLUTION
leakim971

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

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

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

ASKER
tried that also... same errors...
leakim971

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

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

ASKER
correction on the master template:

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

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

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

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

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

ASKER
I rebuilt my usercontrol to match your example, works great... thanks!
Your help has saved me hundreds of hours of internet surfing.
fblack61