asp.net – jQuery UI ” $(“#datepicker”).datepicker is not a function”

The Question :

130 people think this question is useful

When i use DatePicker, jQuery’s UI plugin, in an existing .aspx page I get errors that:

$("#datepicker").datepicker is not a function

However, when I copy and paste the same code that creates and uses the datePicker to an HTML file that’s also in the same directory as the aspx page, it works flawlessly. This leads me to assume that there are some JS files in the aspx page that’s preventing the datePicker or maybe jQuery’s UI JS files to load properly.

Can anyone confirm my beliefs or provide any tips on finding the culprit that’s interfering with jQuery’s UI plugins?

The Question Comments :
  • Can you post the relevant jQuery code please
  • How are you including the datepicker plugin on the page – is it in a ScriptManagerProxy or are you writing it directly into the page? Are you sure that it is being loaded? If so, what other plugins are you including? Are you sure you’ve included ui.core.js?
  • I found the problem. I wish i have found this solution yesterday as oppose to an 1hr after posting this question. The JS code that I’ve written references jQuery and jQuery UI javascript file acted as a module. Its parent also references jQuery at the bottom of the body tag (so 2 references to jQuery). Since jQuery is reinitialized after jQuery UI, jQuery UI is wiped out as a plugin, hence why my code could not find the DatePicker plugin.
  • Since I’m using Webpack, I needed to use jquery-ui-bundle instead. stackoverflow.com/a/39230057/470749

The Answer 1

214 people think this answer is useful

I struggled with a similar problem for hours. It then turned out that jQuery was included twice, once by the program that I was adding a jQuery function to and once by our in-house debugger.

The Answer 2

41 people think this answer is useful

If there is another library that is using the $ variable, you can do this:

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

Also make sure your javascript includes are in the correct order so the jquery core library is defined before the jquery.ui. I’ve had that cause issues.

The Answer 3

23 people think this answer is useful

This error usually appears when you’re missing a file from the jQuery UI set.

Double-check that you have all the files, the jQuery UI files as well as the CSS and images, and that they’re in the correctly linked file/directory location on your server.

The Answer 4

21 people think this answer is useful

jQuery “ $(”#datepicker“).datepicker is not a function”

I have fixed the issue by placing the below three files in the body section of the form at the end.

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

The Answer 5

8 people think this answer is useful

If you think that there is a conflict you can use jQuery.noConflict() in your code. Details are in the docs.

REFERENCING MAGIC – SHORTCUTS FOR JQUERY

If you don’t like typing the full “jQuery” all the time, there are some alternative shortcuts:

Reassign jQuery to another shortcut var $j = jQuery; (This might be the best approach if you wish to use different libraries) Use the following technique, which allows you to use $ inside of a block of code without permanently overwriting $:

(function($) { /* some code that uses $ */ })(jQuery)

Note: If you use this technique, you will not be able to use Prototype methods inside this capsuled function that expect $ to be Prototype’s $, so you’re making a choice to use only jQuery in that block. Use the argument to the DOM ready event:

jQuery(function($) { /*some code that uses $ */ });

Note: Again, inside that block you can’t use Prototype methods

Thats from the end of the docs and might be useful to you

The Answer 6

7 people think this answer is useful

Go for the obvious first: Are you referencing well the jquery-ui.js file?

Try using the network tab of firebug to find if it is loaded, or the Information\View javascript code of the Web Developer Toolbar.

The Answer 7

3 people think this answer is useful

Have you tried using Firebug to 1) determine that there are no Javascript errors and 2) that the #datepicker element exists on the page?

Most likely there is an error prior to the datepicker call that is preventing the datepicker call from executing.

The Answer 8

3 people think this answer is useful

I know that this post is quite old, but for reference I fixed this issue by updating the version of datepicker

It is worth trying that too to avoid hours of debugging.

https://cdnjs.com/libraries/bootstrap-datepicker

The Answer 9

2 people think this answer is useful

I just had this issue, and moving the JS references and code towards the bottom of the page before the </body> tag fixed it for me.

The Answer 10

1 people think this answer is useful

Also check the permissions for the directory you download the files into. For some reason when I downloaded this, by default it was saved in a folder with no access allowed! It took forever to figure out that was the problem, but I just had to change the permission for the directory and it’s contents – setting it so EVERYONE = READ ONLY. Works great now.

The Answer 11

1 people think this answer is useful

I ran into this problem recently – the issue was that I had included the jQuery UI files in the head tag, but the Telerik library I was using included jQuery at the bottom of the body tag (thus apparently re-initializing jQuery and unloading the UI plugins previously loaded).

The solution was to find out where jQuery was actually being included, and including the jQuery UI scripts after that.

The Answer 12

0 people think this answer is useful

I just ran into a similar issue. When I changed my script reference from self-closing tags (ie, <script src=".." />) to empty nodes (ie, <script src=".."></script>) my errors went away and I could suddenly reference the jQuery UI functions.

At the time, I didn’t realize this was just a brain-fart of me not closing it properly to begin with. (I’m posting this simply on the chance that anyone else coming across the thread is having a similar issue.)

The Answer 13

0 people think this answer is useful

Some file no load before you call.

For example: Your code:

<%= javascript_include_tag "distpicker.min" %>
<%= javascript_include_tag "distpicker.data.min" %>

Change to this:

<%= javascript_include_tag "distpicker.data.min" %>
<%= javascript_include_tag "distpicker.min" %>

The Answer 14

0 people think this answer is useful

I could fix this problem removing the jquery bundle on the _Layout.cshtml

Header

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/kendo/2015.2.902/kendo.all.min.js"></script>
    ...

Footer

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

Change footer to

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

The Answer 15

0 people think this answer is useful

Have you tried using $(“#<%= txtDateElementId.ClientID %>”).datepicker(); instead of $(“#txtDateElementId”).datepicker(); when selecting an element by ID using JQuery.

The Answer 16

0 people think this answer is useful

Old question – newer version of .NET (4.5.6) – same issue – new answer

Using NuGet

Make sure you have the following installed via NuGet:

  • jQuery
  • AspNet.ScriptManager.jQuery
  • jQuery.UI.Combined
  • AspNet.ScriptManager.jQuery.UI.Combined

Install them from here [ Tools > NuGet Package Manager > Manage NuGet Packages for Solution ]

Then, jquery and jquery.ui.combined should be added to your ScriptManager in Site.Master. Will look something like this:

    <asp:ScriptManager runat="server">
        <Scripts>
            <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
        </Scripts>
    </asp:ScriptManager>

This solved my same issue. Thank you.

The Answer 17

-1 people think this answer is useful

In my case, it was solved by changing the import order of the following scripts: Before (Not work):

After (Working):

Add a Comment