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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

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.