Jquery DateTimePicker not working with asp.net master page and content page

Question

I have been struggling to get the datetime picker working with Asp.net 4.0. I have added the jquery-1.5.2.min.js and jquery-datepicker.js inside the scripts folder. I'm getting error message

Microsoft JScript runtime error: Object doesn't support this property or method

inside jquery-1.5.2.min.js .

I went through the similar questions posted in stackoverflow, but still not able to resolve the answer. I'm sure that the script path is not getting resolved properly. I tried different combinations adding the script tag in Master and also content page.It still did not work. I also tried ResolveUrl in content page, it still failed.

Updated code - still gives error for me. ' type="text/javascript">
' type="text/javascript">
' rel="stylesheet" type="text/css" />

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

         </script>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
        <script type="text/javascript" src="../Scripts/jquery-1.5.2.min.js" ></script> 
         <script type="text/javascript" src="../Scripts/jquery-datepicker.js" ></script>
        <script type="text/javascript" language="javascript"> 
        $(document).ready(function () 
       {

     $(function () {
         $("#<%=txtDateFrom.ClientID %>").datepicker();             
     });

 }); /*----------------------End of Document Ready----------------------------*/
</script>

Can someone who has worked with Master and content pages and have included jquery datetime picker in the content page help me please?

did you use firebug or dev tools in chrome to check what path it's looking at and if the js files are loading? Even in FF if you just "View Source" you can click the src links to make sure that the page is actually loading your files — Eonasdan
– Eonasdan, Commented Jul 26, 2012 at 20:35
also if your page is in .com/foo/bar/page.aspx then your script points to .com/foo/jquer... — Eonasdan
– Eonasdan, Commented Jul 26, 2012 at 20:36
This is probably unrelated, but I suggest you update jQuery to 1.7.2 via NuGet. Also referencing your scripts like this is better: <script src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")" type="text/javascript"></script> I don't see a reference to a DateTimePicker, but if you need a good one use this — Shahin Dohan
– Shahin Dohan, Commented Jul 26, 2012 at 20:52
@ShahinDohan the OP doesn't look he's using razor views (or mvc for that matter) so the @Url wouldn't work for him (I think). While I've used the timepicker you linked to it required jquery ui which he's also not referencing. — Eonasdan
– Eonasdan, Commented Jul 26, 2012 at 21:00

Hanlet Escaño · Accepted Answer · 2012-07-26 22:12:38Z

0

Unless there is a specific reason why you can't use a Repository like Google's or jQuery, I would suggest you add the jQuery library from one.

<script src="http://code.jquery.com/jquery-latest.js"></script>

Edit: Seems like you have this in the body of the page. Try adding it to the Header (maybe Content1 contentplaceholder?)

Good luck!

EDIT: I have now created a folder called Course, and a page called Course.aspx and this works for me:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeFile="Course.aspx.cs" Inherits="Course_Course" %>

        <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
            <script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
            <script src='=<%Response.Write(Page.ResolveUrl("~/Scripts/jquery.ui.datepicker.js")); %>' type="text/javascript"></script>
            <script src='<%Response.Write(Page.ResolveUrl("~/Scripts/jquery-ui-1.8.22.custom.min.js"));%>' type="text/javascript"></script>
            <link href='<%Response.Write(Page.ResolveUrl("~/Styles/jquery-ui-1.8.22.custom.css")); %>' rel="stylesheet" type="text/css" />
            <script language="javascript" type="text/javascript">
                $(document).ready(function () {
                    $("#<%=TextBox1.ClientID %>").datepicker();
                });
            </script>
        </asp:Content>
        <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </asp:Content>

Good luck!

edited Jul 26, 2012 at 22:12

answered Jul 26, 2012 at 20:34

Hanlet Escaño

17.4k10 gold badges54 silver badges76 bronze badges

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

11 Comments

siv Over a year ago

Hi Hanlet, I tried adding it to the Header and I still get the error. This is making me suffer..

siv Over a year ago

Hanlet, Even after adding the src to point Google's repository, I still get the error..Do you have a similar link for datetime picker as well??

Hanlet Escaño Over a year ago

I do not. Let me set up the same as you and see why you are getting that error and I will get back to you.

siv Over a year ago

Thanks Hanlet. Just to let you know the folder structure of mine. Its a VS2010, Asp.net website. It has a master page.I have a folder name course inside I have a file name course.aspx where I'm trying to set the datetime picker. The jquery files reside under Scripts folder. The stylesheet for datetime picker is in <link href="Styles/JqDatePicker/redmond/datepicker.css" rel="stylesheet" type="text/css" />

Hanlet Escaño Over a year ago

I have the TextBox inside the MasterPage. Is that how you have it? I have updated the code, check it out.

|

Collectives™ on Stack Overflow

Jquery DateTimePicker not working with asp.net master page and content page

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related