Alan Schapira Alan Schapira - 8 days ago 4
C# Question

jQuery error in MVC project: Datepicker is not a function

This is what is in my view:

@Html.TextBox("toDateFilter", "", new { @class = "datepicker" })
...etc
...etc


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

<script>
$(document).ready(function () {
$(".datepicker").datepicker();
});
</script>


I am getting the error:


Datepicker is not a function.


I have followed the advice of all the other similar questions, and nothing has worked. I also changed the View to these imports instead:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" />


I also tried this instead:

var $j = jQuery.noConflict();
$j("#datepicker").datepicker();


Also I did check that the jquery-ui.min.js file loaded correctly.

Any ideas why this is going wrong? Let me know if I can supply more info...

Answer

This is the answer from Starscream1984 in the comments, so props to them!

The issue is that the ready() function was being called before the jquery-ui.js script had finished loading.

This could not be fixed by moving it into the <head> nor loading the scripts from my own domain.

I was able to fix it simply by removing the ready() function entirely, and just running the contents.

If anyone knows how I can force the script to load first, or the ready() function to be called last, please let me know.