користувальницький інтерфейс jQuery "$ (" # datepicker "). Вибір дати не є функцією"


125

Коли я використовую плагін DatePicker, інтерфейс інтерфейсу jQuery на існуючій сторінці .aspx, я отримую помилки, які:

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

Однак, коли я копіюю та вставляю той самий код, який створює та використовує datePicker, у файл HTML, який також знаходиться в тому ж каталозі, що й сторінка aspx, він працює бездоганно. Це змушує мене припустити, що на сторінці aspx є деякі файли JS, які перешкоджають належному завантаженню файлів інтерфейсу JQuery UI jQuery.

Чи може хто-небудь підтвердити мої переконання або надати поради щодо пошуку винуватця, який заважає плагінам інтерфейсу jQuery?


Чи можете ви опублікувати відповідний код jQuery будь ласка
— Russ Cam

Як ви включаєте плагін 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
— Ryan

Відповіді:


210

Я боровся з подібною проблемою годинами. Потім виявилося, що jQuery включався двічі, один раз програмою, до якої я додавав функцію jQuery, і один раз нашим внутрішнім відладчиком.


4
Це було і моє питання. Я мав посилання на свою власну бібліотеку jQuery разом з jQuery Tools CDN, який несвідомо включав jQuery.
— DavGarcia

Це також було моїм питанням. Я використовую superfish, і він також завантажував jquery. Я цього не помічав досі.
— rrtx2000

45
То яке рішення?
— Анріке Ордін

8
@HenriqueOrdine двічі перевірте, чи jQuery не входить двічі на сторінку.
— Євген ван дер Мерве

Це також було моєю проблемою. Я використовував загальні активи в конвеєрі активів рейлів, і обидва оголошував jquery в моєму мета-файлі верхнього рівня (application.js) І мав файл jquery min у моїй папці JS. Двічі заявити. Я щойно видалив декларацію jquery.
— Маріо

38

Якщо є інша бібліотека, яка використовує змінну $, ви можете зробити це:

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

Також переконайтеся, що ваш JavaScript включає в правильному порядку, щоб основна бібліотека jquery була визначена перед jquery.ui. У мене виникли проблеми з причиною.


Також переконайтеся, що ваш 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 "). Вибір дати не є функцією"

Я вирішив проблему, розмістивши нижче три файли в розділі тіла форми в кінці.

  <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 на інший ярлик var $j = jQuery;(Це може бути найкращим підходом, якщо ви бажаєте використовувати різні бібліотеки) Використовуйте наступну техніку, яка дозволяє використовувати $ всередині блоку коду без остаточного перезапису $:

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

Примітка: Якщо ви використовуєте цю техніку, ви не зможете використовувати методи прототипу всередині цієї капсульованої функції, які очікують, що $ буде прототипом $, тому ви робите вибір використовувати лише jQuery у цьому блоці. Використовуйте аргумент для події, готової до DOM:

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

Примітка. Знову ж таки, всередині цього блоку не можна використовувати методи прототипу

Це з кінця документів і може бути корисним для вас


7

Перш за все очевидно: Ви добре посилаєтесь на файл jquery-ui.js?

Спробуйте скористатися вкладкою мережі firebug, щоб дізнатись, чи завантажена вона, або Інформація \ Переглянути код JavaScript на панелі інструментів веб-розробників.


3

Ви намагалися за допомогою Firebug до 1) визначити, що немає помилок Javascript і 2) що на сторінці існує елемент #datepicker?

Швидше за все, перед початком виклику датника виникла помилка, яка перешкоджає виконанню дзвінка.


2

Я знаю, що ця публікація досить стара, але для довідки я виправив це питання, оновивши версію датника

Це також варто спробувати, щоб уникнути годин налагодження.

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


2
Це не стосується вибору дати інтерфейсу користувача Jquery. Вибірка дати завантаження - це зовсім інша тварина.
— RedSands

1

Щойно у мене виникла ця проблема, і переміщення посилань та коду JS у нижній частині сторінки, перш ніж </body>тег зафіксував її.


1

Також перевірте дозволи для каталогу, в який завантажуєте файли. Колись я завантажив це, за замовчуванням він був збережений у папці без доступу! Це зайняло назавжди, щоб зрозуміти, що це проблема, але я просто повинен був змінити дозвіл на каталог і його вміст - встановивши його так ВСЕГО = ЧИТАТИ ТОЛЬКО Зараз чудово працює.


1

Я нещодавно зіткнувся з цією проблемою - проблема полягала в тому, що я включив файли інтерфейсу jQuery в головний тег, але бібліотека Telerik, яку я використовував, включила jQuery внизу тегу body (таким чином, очевидно, повторно ініціалізувала jQuery і вивантажувала інтерфейс користувача раніше завантажені плагіни).

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


0

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

У той час я не усвідомлював, що це просто придумка мозку, яка не закрила його належним чином для початку. (Я публікую це просто з тим шансом, що хтось інший, що стикається з потоком, має подібну проблему.)


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)

0

Ви спробували використовувати $ ("# <% = txtDateElementId.ClientID%>"). Datepicker (); замість $ ("# txtDateElementId"). datepicker (); при виборі елемента за ідентифікатором за допомогою JQuery.


-1

У моєму випадку це було вирішено, змінивши порядок імпорту таких сценаріїв: до (Не працює):

Після (Робота):

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.