Uncaught TypeError: undefined не является функцией при использовании jQuery UI

Я раньше не использовал jQuery, и я хотел использовать плагин DateTimePicker на моей веб-странице.

Я загрузил файл плагина и поместил его в тот же каталог, что и файлы HTML.

Я непосредственно применил код в How to use it? в http://xdsoft.net/jqplugins/datetimepicker/.

Он высказал следующую ошибку.

Uncaught TypeError: undefined не является функцией pixelcrawler: 61 (анонимная функция)

Мой код следует.

<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" >
                                        .
                                        .
                                        .
                                        .
                                        .

Я не мог понять, в чем проблема. Я попробовал много других, казалось бы, вероятных вариантов, но он просто не работал.

(Теги ${} используются для языка шаблона Mako. Я использую Cherrypy.)

UPDATE:

Я понял источник проблемы.

Это от jQuery('#datetimepicker').datetimepicker();.

При тестировании функция datetimepicker() была undefined. Может быть, способ, которым я импортировал библиотеку, был неправильным?

Ответы

Ответ 1

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

Я не знаю вашу файловую структуру. Я никогда не включаю локальные файлы, подобные этому, поскольку я использую относительные URL-адреса с самого начала, а не изменяю каждый раз, когда я готов использовать этот код, но, вероятно, один из файлов не загружается. Я включил стандарт datepicker ниже, используя Google CDN jQuery UI. Не удается ли найти в консоли какие-либо ресурсы?

Я думаю, что ваш jQuery загружен ОК, потому что он не говорит вам, что jQuery не определен, так что это один из ваших файлов.

Кстати, PHP получает домашний URL:

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

Демонстрационный код 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">

Ответ 2

Это о механизме разбора HTML.

Парсер HTML будет анализировать содержимое HTML сверху вниз. В вашей логике script

jQuery('#datetimepicker')

вернет пустой экземпляр, потому что элемент еще не загружен.

Вы можете использовать

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

или

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

сначала проанализировать элемент HTML, а затем создать собственную логику script.

Ответ 3

использовать jQuery.noConflict()

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

Ответ 4

В моей ситуации это была проблема конфликта имен. Добавление $J разрешает его.

//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");
    }

И вот новый код.

 $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");
    });
});

Надеюсь, это может помочь кому-то.

Ответ 5

Обычно, когда вы получаете эту проблему, это происходит потому, что script пытается ссылаться на элемент, который еще не существует во время загрузки страницы.

Как сказал richie: "Парсер HTML будет анализировать содержимое HTML сверху донизу..."

Итак, вы можете добавить ссылки на JavaScript в нижней части HTML файла. Это не только улучшит производительность; он также гарантирует, что все элементы, указанные в ваших файлах script, уже были загружены парсером HTML.

Итак, у вас может быть что-то вроде этого:

<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>

Ответ 6

Вы можете увидеть, если вы не загружаете jQuery дважды. Особенно после загрузки файла JavaScript плагина.

У меня такая же ошибка, и я обнаружил, что один из моих внешних PHP файлов снова загружал jQuery.

Ответ 7

Проблема из-за не загрузки библиотеки jquery ui.

https://code.jquery.com/ui/1.11.4/jquery-ui.js - исходный файл CDN

Вызовите выше путь в вашем файле.

Ответ 8

И если у вас есть эта проблема в слайдере или слайд-шоу, вы должны использовать jquery.easing.1.3:

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

Ответ 10

Я не думаю, что сам jQuery включает datetimepicker. Вы должны вместо этого использовать jQuery UI (src= "jquery.ui" ).