jQuery UI «$ (» # datepicker «). datepicker не является функцией»

Когда я использую DatePicker, плагин пользовательского интерфейса jQuery, на существующей странице .aspx я получаю следующие ошибки:

$("#datepicker").datepicker is not a function

Однако, когда я копирую и вставляю тот же код, который создает и использует datePicker, в файл HTML, который также находится в том же каталоге, что и страница aspx, он работает безупречно. Это заставляет меня предположить, что на странице aspx есть некоторые JS-файлы, которые препятствуют правильной загрузке datePicker или, возможно, JS-файлов пользовательского интерфейса jQuery.

Может ли кто-нибудь подтвердить мои убеждения или дать какие-либо советы по поиску виновника, который мешает плагинам пользовательского интерфейса jQuery?

Я часами боролся с подобной проблемой. Затем выяснилось, что jQuery был включен дважды: один раз программой, в которую я добавлял функцию jQuery, и один раз нашим внутренним отладчиком.

Если есть другая библиотека, использующая переменную $, вы можете сделать это:

var $j = jQuery.noConflict();
$j("#datepicker").datepicker();

Также убедитесь, что ваши javascript-файлы находятся в правильном порядке, чтобы основная библиотека jquery была определена до jquery.ui. У меня были проблемы с этой причиной.

Эта ошибка обычно появляется, когда вам не хватает файла из набора пользовательского интерфейса jQuery.

Дважды убедитесь, что у вас есть все файлы, файлы пользовательского интерфейса jQuery, а также CSS и изображения, и что они находятся в правильно связанном месте файла / каталога на вашем сервере.

jQuery «$ (» # datepicker «). datepicker не является функцией»

Я исправил проблему, разместив следующие три файла в разделе тела формы в конце.

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

Если вы считаете, что существует конфликт, вы можете использовать его jQuery.noConflict()в своем коде. Подробности в документации .

ССЫЛКА НА МАГИЮ - ЯРЛЫКИ ДЛЯ JQUERY

Если вам не нравится все время набирать полный "jQuery", есть несколько альтернативных ярлыков:

Переназначьте jQuery другому ярлыку var $j = jQuery;(это может быть лучшим подходом, если вы хотите использовать другие библиотеки) Используйте следующий метод, который позволяет вам использовать $ внутри блока кода без постоянной перезаписи $:

(function($) { /* some code that uses $ */ })(jQuery)

Примечание. Если вы воспользуетесь этой техникой, вы не сможете использовать методы прототипа внутри этой капсульной функции, которые ожидают, что $ будет прототипом $, поэтому вы делаете выбор использовать только jQuery в этом блоке. Используйте аргумент для события готовности DOM:

jQuery(function($) { /*some code that uses $ */ });

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

Это из конца документации и может быть вам полезно

Сначала сделайте очевидное: хорошо ли вы ссылаетесь на файл jquery-ui.js?

Попробуйте использовать вкладку сети firebug, чтобы узнать, загружена ли она, или код javascript Информация \ Просмотр панели инструментов веб-разработчика.

Пробовали ли вы использовать Firebug для 1) определения отсутствия ошибок Javascript и 2) наличия на странице элемента #datepicker?

Скорее всего, перед вызовом datepicker произошла ошибка, которая препятствует выполнению вызова datepicker.

Я знаю, что этот пост довольно старый, но для справки я исправил эту проблему, обновив версию datepicker

Это тоже стоит попробовать, чтобы избежать многочасовой отладки.

https://cdnjs.com/libraries/bootstrap-datepicker

У меня только что возникла эта проблема, и я переместил ссылки и код JS в нижнюю часть страницы, прежде чем </body>тег исправил ее для меня.

Также проверьте разрешения для каталога, в который вы загружаете файлы. По какой-то причине, когда я скачал это, по умолчанию он был сохранен в папке без доступа! Потребовалась целая вечность, чтобы понять, что это была проблема, но мне просто пришлось изменить разрешение для каталога и его содержимого - установив его так, чтобы EVERYONE = READ ONLY. Теперь отлично работает.

Недавно я столкнулся с этой проблемой - проблема заключалась в том, что я включил файлы пользовательского интерфейса jQuery в тег заголовка, но библиотека Telerik, которую я использовал, включала jQuery в нижней части тега тела (таким образом, очевидно, повторная инициализация jQuery и выгрузка пользовательского интерфейса ранее загруженные плагины).

Решение заключалось в том, чтобы выяснить, где на самом деле был включен jQuery, а затем включить сценарии пользовательского интерфейса jQuery.

Я столкнулся с похожей проблемой. Когда я изменил ссылку на сценарий с самозакрывающихся тегов (т. Е. <script src=".." />) На пустые узлы (т. Е. <script src=".."></script>), Мои ошибки исчезли, и я мог внезапно ссылаться на функции пользовательского интерфейса jQuery.

В то время я не понимал, что это просто глупый трюк с моей стороны, что я не закрыл его должным образом с самого начала. (Я публикую это просто на случай, если у кого-то еще, столкнувшись с этой веткой, возникнет аналогичная проблема.)

Какой-то файл не загружается перед звонком.

Например: Ваш код:

<%= javascript_include_tag "distpicker.min" %>
<%= javascript_include_tag "distpicker.data.min" %>

Измените на это:

<%= javascript_include_tag "distpicker.data.min" %>
<%= javascript_include_tag "distpicker.min" %>

Я мог бы решить эту проблему, удалив пакет jquery в _Layout.cshtml

заголовок

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/kendo/2015.2.902/kendo.all.min.js"></script>
    ...

нижний колонтитул

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

Измените нижний колонтитул на

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

Вы пробовали использовать $ ("# <% = txtDateElementId.ClientID%>"). Datepicker (); вместо $ ("# txtDateElementId"). datepicker (); при выборе элемента по ID с помощью JQuery.

В моем случае это было решено изменением порядка импорта следующих скриптов: До (не работает):

После (работы):