Uncaught TypeError: $ is not a function - при подключении js скрипта и его инициализации
Добрый вечер, столкнулся с проблемой подключения дополнительной библиотеки к темплэйту сайта на D7
А именно, имеется сайт http://t96348pm.beget.tech/
на котором используется Bootstrap темплэйт, модуль JQuery Update и собственно всё
При попытке подключить дополнительную библиотеку bootstrap-autocomplete получаю ошибку в консоли
at new AutoComplete (main.ts:53)
at HTMLInputElement.eval (main.ts:411)
at Function.each (jquery.min.js?v=1.10.2:4)
at $.fn.init.each (jquery.min.js?v=1.10.2:4)
at $.fn.init.$.fn.<computed> [as autoComplete] (main.ts:407)
at Object.attach (custom.js?qbtv5g:17)
at Object.<anonymous> (drupal.js?qbtv5g:112)
at Function.each (jquery.min.js?v=1.10.2:4)
at Object.Drupal.attachBehaviors (drupal.js?qbtv5g:110)
at HTMLDocument.<anonymous> (drupal.js?qbtv5g:593)
Которая ведёт на данную строку в коде
Дополнительную библиотеку подключаю через темплэйт
scripts[] = 'js/bootstrap-datetimepicker.min.js'
scripts[] = 'js/bootstrap-autocomplete.js'
scripts[] = 'js/custom.js'
И инициализирую в custom.js
Drupal.behaviors.test_bootstrap_autocomplete = {
attach: function () {
$('#test-bootstrap-autocomplete').autoComplete({
resolverSettings: {
url: 'sites/defaul/files/test-list.json'
}
});
}
};
}(jQuery));
Вроде как всё справке Но в результате ошибка :/
Надо отметить, что по аналогии подключал библиотеку bootstrap-datetimepicker , и также её инициализировал, и никаких проблем нет, всё успешно работает.
А с данной библиотекой печаль, скорее всего есть какой то нюанс её инициализации, но не могу найти причину и решение.
Также стоит отметить, что если работу этой библиотеки повторить в обыкновенном html файле, то там таких ошибок нет
http://t96348pm.beget.tech/test-bootstrap-autocomplete.html
(первый input)
Подскажите пожалуйста, в чём может быть проблема/конфликт?
- Блог
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Комментарии
Похоже, что библиотека конфликтует с jquery. Нужно погуглить этот момент
Уже всякое тоже Интернет гуглил, в основном у всех решается проблемой то что они перешли на behaviors, до этого они просто использовали $( document ).ready().
Уже всяко разно менял скрипт вызова
* Добавлял .once (https://www.drupal.org/node/756722#jquery-once)
* Менял версию JQuery на фронтэнде
*
'use strict';
/* CODE GOES HERE */
})(jQuery, Drupal);
* ...
Очевидно, код плагина ожидает, что в глобальной области будет переменная
$
, равнаяjQuery
. В Друпал это не так, чтобы избежать конфликтов с другими библиотеками, которые могут использовать $. По-этому, либо попробовать заключить все содержимое файла bootstrap-autocomplete.js в конструкцию// CODE HERE
}(jQuery));
Либо искать другой плагин. Либо использовать встроенные средства http://xandeadx.ru/blog/drupal/344
Большое спасибо!
обвёртка помогла!
// CODE HERE
}(jQuery));