Datepicker not working

Posted on 2014-01-28
Medium Priority
Last Modified: 2014-01-29
I am looking help again.
I am trying to use JQuery datepicker and as far as I can see I following all examples word for word but nothing is happening.
Here are the scripts I am using (I also have a jstree)
 <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 

    <script src="../../Scripts/Dialog/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../../Scripts/Dialog/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>    
    <script src="../../Scripts/jsTree/_lib/jquery.js" type="text/javascript"></script>   
    <script src="../../Scripts/jsTree/_lib/jquery.jstree.js" type="text/javascript"></script>
    <script src="../../Scripts/jsTree/_lib/jquery.cookie.js" type="text/javascript"></script>    
    <link href="../../Scripts/jsTree/jstree.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/blitzer/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />

Open in new window

and then in my Master page I have
$(document).ready(function() {

Open in new window

and in my partialView which is loaded through Ajax, I have
<%= Html.TextBoxFor(model => model.Date, new { id = "datepicker", @class = "date" })%>

Open in new window

When I go into the textbox nothing happens but when I search firebug it gives the error
TypeError: $(...).datepicker is not a function

Open in new window

I also tried using $("#datepicker").datepicker();
but get the same error
Question by:Niall292
  • 6
LVL 44

Assisted Solution

by:Rainer Jeschor
Rainer Jeschor earned 1000 total points
ID: 39816379
how do you load your partial view through ajax?
In the success/complete event you have to run

Open in new window

again - as the DOM was not there when you run the initial document.ready.


Author Comment

ID: 39816405
I load my partial view by Ajax.

I will try this first thing in the morning and let you know how I get on


Author Comment

ID: 39816481
I couldn't wait until tomorrow.

I put the line into the function like
  function getAddDeviation() {          
                url:"/Deviations/Create/" + TreeId,
                success: function(content) {  
//                    $("#hdnfld").val(TreeId);

Open in new window

but now when I try to open the partialview nothing happens but I get the same error in Firebug.
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!


Author Comment

ID: 39816513
Something that might make a difference, (I'm not sure)

I open the a partial view in the  but then the Input fields are loaded as a partial view in that partial view.
I'm not sure if that might cause an issue but it was the only way I could think of doing what I was trying to accomplish

Accepted Solution

Hiran Desai earned 1000 total points
ID: 39816899
What I can say is,
1) Open chrome -> load your page
2) press F12 (which will open inspector window) / you can also use firebug
3) Check Resources tab
4) Are you having two jQuery.js files? (doesn't matter versions)
 in Your code folllowing line
<script src="../../Scripts/Dialog/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../../Scripts/Dialog/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>    
    <script src="../../Scripts/jsTree/_lib/jquery.js" type="text/javascript"></script>

Open in new window

First line references to jQuery file and third file also references to the same(Correct me if I'm not wrong).

jquery-1.9.1.js file has declaration of $ function
jquery-ui-1.10.3.custom.min.js extends $ function
jquery.js again declares $ function which will overwrite the extended functionality and hence UI functions won't be available.

Author Comment

ID: 39817582
Thanks for the response but I have now removed Jquery.js and it seems to make no difference

In Chrome Resources > scripts it shows


and put $(".date").datepicker(); in my ajax call but still nothing

Author Comment

ID: 39817589
I rearranged the scripts and it started working, so thank you all for your help and I will divide the points out.

Thank you again

Author Closing Comment

ID: 39817598
I think it was a combination of the 2 answers. Putting the $(".date").datepicker(); in my ajax call and removing the extra js file. Then also putting the files in the right order and it worked

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
There is a wide range of advantages associated with the use of ASP.NET. This is why this programming framework is used to create excellent enterprise-class websites, technologies, and web applications.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question