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

125

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

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

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

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

burnt1ce
источник
Не могли бы вы опубликовать соответствующий код jQuery, пожалуйста
Расс Кэм
Как вы включаете плагин datepicker на страницу - в ScriptManagerProxy или вы пишете его прямо на странице? Вы уверены, что он загружается? Если да, то какие еще плагины вы включаете? Вы уверены, что включили ui.core.js?
Джеймс Колпак,
12
Я нашел проблему. Мне жаль, что я нашел это решение вчера, в отличие от 1 часа после публикации этого вопроса. Написанный мной код JS ссылается на файл javascript jQuery и jQuery UI, выступающий в качестве модуля. Его родительский элемент также ссылается на jQuery в нижней части тега body (т.е. 2 ссылки на jQuery). Поскольку jQuery повторно инициализируется после пользовательского интерфейса jQuery, пользовательский интерфейс jQuery удаляется как плагин, поэтому мой код не смог найти плагин DatePicker.
Burnt1ce
Поскольку я использую Webpack, мне нужно было использовать вместо него jquery-ui-bundle. stackoverflow.com/a/39230057/470749
Райан

Ответы:

210

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

Юджин ван дер Мерве
источник
4
Это тоже была моя проблема. У меня была ссылка на мою собственную библиотеку jQuery вместе с CDN jQuery Tools, которая бессознательно включала jQuery.
DavGarcia
Это тоже была моя проблема. Я использую superfish, и он также загружает jquery. Я не заметил этого до сих пор.
rrtx2000 05
45
Итак, какое решение?
Энрике Ордин,
8
@HenriqueOrdine дважды проверьте, что jQuery не включен на страницу дважды.
Юджин ван дер Мерве,
Это тоже была моя проблема. Я использовал общие ресурсы в конвейере ресурсов rails и объявлял jquery в моем метафайле верхнего уровня (application.js) И имел файл jquery min в моей папке JS. Дважды DECLARE. Я только что удалил объявление jquery.
Марио
38

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

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

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

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

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

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

случайный
источник
Этот ответ наиболее близок к опубликованному мной решению.
Burnt1ce
Примечание для себя: убедитесь, что при переключении с локальных файлов на файлы CDN Google у вас действительно есть правильный URL. Это ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js, а не ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery-ui.min.js, черт возьми.
neminem
17

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" />
Кришна
источник
1
Вы спасаете жизнь, так или иначе из всех ответов, именно ЭТО тот, который спас меня после 2 дней безостановочной борьбы.
Теджас Джагги,
8

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

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

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

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

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

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

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

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

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

AutomatedTester
источник
7

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

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

eKek0
источник
3

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

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

1kevgriff
источник
2

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

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

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

Yannickv
источник
2
Это не применимо к Datepicker пользовательского интерфейса JQuery. Bootstrap datepicker - совсем другое дело.
RedSands
1

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

Banjer
источник
1

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

Мэтью Фрис
источник
1

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

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


источник
0

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

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

Питер Бернье
источник
0

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

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

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

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

<%= javascript_include_tag "distpicker.data.min" %>
<%= javascript_include_tag "distpicker.min" %>
Дэвид Цанг
источник
0

Я мог бы решить эту проблему, удалив пакет 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)
jaimenino
источник
0

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

Эмиль Филип
источник
-1

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

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

Матиас В.
источник