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

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?

This question is related to javascript jquery

The answer is


I don't think jQuery itself includes datetimepicker. You must use jQuery UI instead (src="jquery.ui").


You may see if you are not loading jQuery twice somehow. Especially after your plugin JavaScript file loaded.

I has the same error and found that one of my external PHP files was loading jQuery again.


The issue because of not loading jquery ui library.

https://code.jquery.com/ui/1.11.4/jquery-ui.js - CDN source file

Call above path in your file.


I had trouble getting selectable to work with ASP.NET. It turns out I wasn't properly including everything, but this gentleman made it foolproof: Three steps to use jQuery UI in ASP.NET MVC 5.


use jQuery.noConflict()

var j = jQuery.noConflict();
j(document).ready(function(){
    j('#datetimepicker').datepicker();
})

Usually when you get this problem, it happens because a script is trying to reference an element that doesn't exist yet while the page is loading.

As richie mentioned: "The HTML parser will parse the HTML content from top to bottom..."

So you can add your JavaScript references to the bottom of the HTML file. This will not only improve performance; it will also ensure that all elements referenced in your script files have already been loaded by the HTML parser.

So you could have something like this:

<html>
    <head>
        <!--  Style sheet references and CSS definitions -->
    </head>
    <body>
        <!-- HTML markup and other page content -->

        <!-- JavaScript references. You could include jQuery here as well and do all your scripting here. -->
    </body>
</html>

For my situation, it was a naming conflict problem. Adding $J solves it.

//Old code:
function () {
    var extractionDialog;

    extractionDialog = $j("#extractWindowDialog").dialog({
        autoOpen: false,
        appendTo: "form",
        height: "100",
        width: "250",
        modal: true
    });

    $("extractBomInfoBtn").button().on("click", function () {
        extractionDialog.dialog("open");
    }

And the following is new code.

 $j(function () {
    var extractionDialog;

    extractionDialog = $j("#extractWindowDialog").dialog({
        autoOpen: false,
        appendTo: "form",
        height: "100",
        width: "250",
        modal: true
    });

    $j("extractBomInfoBtn").button().on("click", function () {
        extractionDialog.dialog("open");
    });
});

Hope it could help someone.


This is about the HTML parse mechanism.

The HTML parser will parse the HTML content from top to bottom. In your script logic,

jQuery('#datetimepicker')

will return an empty instance because the element has not loaded yet.

You can use

$(function(){ your code here });

or

$(document).ready(function(){ your code here });

to parse HTML element firstly, and then do your own script logics.


And if you have this problem in slider or slideshow you must use jquery.easing.1.3:

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>