jQuery UI datepicker datepicker is not a function

Question

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

User · Answer

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.

User · Answer

I just had this issue  and moving the JS references and code towards the bottom of the page before the  lt  body gt  tag fixed it for me

User · Answer

Some file no load before you call   For example  Your code    lt    javascript include tag  distpicker min    gt   lt    javascript include tag  distpicker data min    gt    Change to this    lt    javascript include tag  distpicker data min    gt   lt    javascript include tag  distpicker min    gt

User · Answer

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

User · Answer

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

User · Answer

I could fix this problem removing the jquery bundle on the  Layout cshtml  Header       lt script src    Scripts jquery-1 10 2 js  gt  lt  script gt       lt script src    Scripts kendo 2015 2 902 kendo all min js  gt  lt  script gt            Footer       Scripts Render    bundles jquery        Scripts Render    bundles bootstrap        RenderSection  scripts   required  false    Change footer to       Scripts Render    bundles bootstrap        RenderSection  scripts   required  false

User · Answer

I just ran into a similar issue  When I changed my script reference from self-closing tags  ie   lt script src        gt   to empty nodes  ie   lt script src      gt  lt  script gt   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

User · Answer

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

User · Answer

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       lt script src  http   ajax googleapis com ajax libs jquery 1 6 jquery min js  type  text javascript  gt  lt  script gt       lt script src  http   ajax googleapis com ajax libs jqueryui 1 8 jquery-ui min js  type  text javascript  gt  lt  script gt       lt link href  http   ajax googleapis com ajax libs jqueryui 1 8 themes base jquery-ui css  rel  Stylesheet  type  text css    gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Have you tried using       lt    txtDateElementId ClientID      datepicker     instead of      txtDateElementId   datepicker    when selecting an element by ID using JQuery

User · Answer

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  gt  NuGet Package Manager  gt  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       lt asp ScriptManager runat  quot server quot  gt           lt Scripts gt               lt  --To learn more about bundling scripts in ScriptManager see https   go microsoft com fwlink  LinkID 301884 --  gt               lt  --Framework Scripts--  gt               lt asp ScriptReference Name  quot MsAjaxBundle quot    gt               lt asp ScriptReference Name  quot jquery quot    gt               lt asp ScriptReference Name  quot jquery ui combined quot    gt               lt asp ScriptReference Name  quot bootstrap quot    gt               lt asp ScriptReference Name  quot WebForms js quot  Assembly  quot System Web quot  Path  quot   Scripts WebForms WebForms js quot    gt               lt asp ScriptReference Name  quot WebUIValidation js quot  Assembly  quot System Web quot  Path  quot   Scripts WebForms WebUIValidation js quot    gt               lt asp ScriptReference Name  quot MenuStandards js quot  Assembly  quot System Web quot  Path  quot   Scripts WebForms MenuStandards js quot    gt               lt asp ScriptReference Name  quot GridView js quot  Assembly  quot System Web quot  Path  quot   Scripts WebForms GridView js quot    gt               lt asp ScriptReference Name  quot DetailsView js quot  Assembly  quot System Web quot  Path  quot   Scripts WebForms DetailsView js quot    gt               lt asp ScriptReference Name  quot TreeView js quot  Assembly  quot System Web quot  Path  quot   Scripts WebForms TreeView js quot    gt               lt asp ScriptReference Name  quot WebParts js quot  Assembly  quot System Web quot  Path  quot   Scripts WebForms WebParts js quot    gt               lt asp ScriptReference Name  quot Focus js quot  Assembly  quot System Web quot  Path  quot   Scripts WebForms Focus js quot    gt               lt asp ScriptReference Name  quot WebFormsBundle quot    gt               lt  --Site Scripts--  gt           lt  Scripts gt       lt  asp ScriptManager gt   This solved my same issue  Thank you

User · Answer

In my case  it was solved by changing the import order of the following scripts  Before  Not work         After  Working

User · Answer

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

[asp.net] jQuery UI " $("#datepicker").datepicker is not a function"

Examples related to asp.net

Examples related to javascript

Examples related to jquery

Examples related to datepicker