Uncaught TypeError: $ is not a function - при подключении js скрипта и его инициализации

Главные вкладки

Аватар пользователя strelkov.av strelkov.av 12 июня 2020 в 22:42

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

А именно, имеется сайт http://t96348pm.beget.tech/
на котором используется Bootstrap темплэйт, модуль JQuery Update и собственно всё
При попытке подключить дополнительную библиотеку bootstrap-autocomplete получаю ошибку в консоли

main.ts:53 Uncaught TypeError: $ is not a function
    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)

Которая ведёт на данную строку в коде

this._$el = $(this._el);

Дополнительную библиотеку подключаю через темплэйт

scripts[] = 'js/moment-with-locales.js'
scripts[] = 'js/bootstrap-datetimepicker.min.js'
scripts[] = 'js/bootstrap-autocomplete.js'
scripts[] = 'js/custom.js'

И инициализирую в custom.js

(function ($) {
  Drupal.behaviors.test_bootstrap_autocomplete = {
    attach: function () {

    $('#test-bootstrap-autocomplete').autoComplete({
      resolverSettings: {
        url: 'sites/defaul/files/test-list.json'
      }
    });

    }
  };
}(jQuery));

Вроде как всё справке Smile Но в результате ошибка :/
Надо отметить, что по аналогии подключал библиотеку bootstrap-datetimepicker , и также её инициализировал, и никаких проблем нет, всё успешно работает.
А с данной библиотекой печаль, скорее всего есть какой то нюанс её инициализации, но не могу найти причину и решение.

Также стоит отметить, что если работу этой библиотеки повторить в обыкновенном html файле, то там таких ошибок нет
http://t96348pm.beget.tech/test-bootstrap-autocomplete.html
(первый input)

Подскажите пожалуйста, в чём может быть проблема/конфликт?

Лучший ответ

Аватар пользователя charOFF charOFF 13 июня 2020 в 14:01
1

Очевидно, код плагина ожидает, что в глобальной области будет переменная $, равная jQuery. В Друпал это не так, чтобы избежать конфликтов с другими библиотеками, которые могут использовать $. По-этому, либо попробовать заключить все содержимое файла bootstrap-autocomplete.js в конструкцию

(function ($) {
  // CODE HERE
}(jQuery));

Либо искать другой плагин. Либо использовать встроенные средства http://xandeadx.ru/blog/drupal/344

Комментарии

Аватар пользователя strelkov.av strelkov.av 13 июня 2020 в 9:01

Уже всякое тоже Интернет гуглил, в основном у всех решается проблемой то что они перешли на behaviors, до этого они просто использовали $( document ).ready().

Уже всяко разно менял скрипт вызова

* Добавлял .once (https://www.drupal.org/node/756722#jquery-once)
* Менял версию JQuery на фронтэнде
*

(function ($, Drupal) {
  'use strict';
  /* CODE GOES HERE */
})(jQuery, Drupal);

* ...

Аватар пользователя charOFF charOFF 13 июня 2020 в 14:01
1

Очевидно, код плагина ожидает, что в глобальной области будет переменная $, равная jQuery. В Друпал это не так, чтобы избежать конфликтов с другими библиотеками, которые могут использовать $. По-этому, либо попробовать заключить все содержимое файла bootstrap-autocomplete.js в конструкцию

(function ($) {
  // CODE HERE
}(jQuery));

Либо искать другой плагин. Либо использовать встроенные средства http://xandeadx.ru/blog/drupal/344