Uncaught TypeError: undefined is not a function while using jQuery UI

Question

I haven't used jQuery before, and I wanted to use DateTimePicker plugin on my web page.

I downloaded the plugin file and placed them in the same directory as the HTML files.

I directly applied the code at How to use it? in http://xdsoft.net/jqplugins/datetimepicker/.

It threw the following error.

Uncaught TypeError: undefined is not a function pixelcrawler:61 (anonymous function)

My code follows.

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="file:///jquery.datetimepicker.css"/ > <script src="file:///jquery.datetimepicker.js"></script> <script>     jQuery('#datetimepicker').datetimepicker(); </script>  <div class="container">   <div class="text-center">     <div class="page-header">       <h1>${conf['title']} <small>${conf['description']}</small></h1>     </div>   </div>   <div class="text">       <input id="datetimepicker" type="text" >                                         .                                         .                                         .                                         .                                         . 

I could not figure out what the problem was. I have tried many other seemingly likely options, but it just did not work either.

(The ${} tags are used for the Mako template language. I am using Cherrypy.)

---

UPDATE:

I figured out the source of the problem.

It's from jQuery('#datetimepicker').datetimepicker();.

When tested, the datetimepicker() function was undefined. Maybe the way I imported the library was wrong?

Answer 1

jQuery(document).ready(function(){     jQuery('#datetimepicker').datepicker(); }) 

I don't know your file-structure. I never include local files like this as I use relative URLs from the start rather than having to change everytime I'm ready to use the code, but it's likely one of the files isn't being loaded in. I've included the standard datepicker below using Google CDN's jQuery UI. Does your console log any resources not found?

I think your jQuery is loaded OK, because it's not telling you jQuery is not defined so it's one of your files.

BTW, PHP gets the home URL:

$home="http://" . $_SERVER['HTTP_HOST'].'/'; 

Demo code datepicker, jQuery UI:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>  <script type="text/javascript">     jQuery(document).ready(function(){         jQuery('#datetimepicker').datepicker();     }) </script>  <input id="datetimepicker" type="text">