Использование JQuery в Drupal 7

Я пишу свой собственный модуль Drupal 7 и люблю использовать в нем JQuery.

$('#field').toggle();

Но я получаю эту ошибку:

TypeError: Property '$' of object [object DOMWindow] is not a function

Кажется, что JQuery не загружен. В противном случае $ должен быть определен.

Хотя я на самом деле включаю это в заголовок:

<script type="text/javascript" src="http://rockfinder.de/misc/jquery.js?v=1.4.4"></script>

Нужно ли мне делать что-то еще, чтобы активировать JQuery в Drupal? $ перезаписывается Drupal?

Это веб-сайт: http://rockfinder.orgapage.de.


javascript jquery drupal drupal-7
person JochenJung    schedule 13.01.2011    source источник

Ответы (5)


arrow_upward
92
arrow_downward

Из руководства по обновлению Drupal 7:

Javascript должен быть совместим с другими библиотеками, кроме jQuery, путем добавления небольшой оболочки вокруг существующего кода:

(function ($) {
  // Original JavaScript code.
})(jQuery);

$ global больше не будет ссылаться на объект jquery. Однако при такой конструкции локальная переменная $ будет ссылаться на jquery, что позволит вашему коду в любом случае получить доступ к jQuery через $, при этом код не будет конфликтовать с другими библиотеками, использующими $global.

Вы также можете просто использовать переменную jQuery вместо переменной $ в своем коде.

person Eaton    schedule 13.01.2011
comment
Спасибо! Это именно то, что я искал и не мог найти! - person JochenJung; 13.01.2011
comment
Я не знаком с этим синтаксисом в Javascript. Может ли кто-нибудь объяснить, что здесь происходит? - person Jim Greenleaf; 18.01.2011
comment
Он в основном создает псевдоним от $ до jQuery. Как было сказано выше, причиной этого является включение других библиотек JS, которые используют расширение $. - person Berdir; 31.01.2011
comment
По какой-то причине это дало мне длинное сообщение об ошибке, но когда я просто заменил $ на jQuery, все заработало нормально. - person Jasmo; 29.03.2012
comment
@Jim Код заключен в функцию с параметром $. Затем он вызывается с помощью jQuery, который выполняет функцию, заменяя все экземпляры $ на jQuery. Это один из трех методов решения проблемы «$ не является функцией» (см. tshikatshikaaa.blogspot.com/2012/05/) - person Jérôme Verstrynge; 16.05.2012

arrow_upward
14
arrow_downward

Согласно Firebug, ваш файл jQuery загружается:

альтернативный текст

Но $ перезаписывается чем-то другим:

альтернативный текст

Что вам нужно сделать, так это инкапсулировать использование переменной $ с функцией, которая вызывает себя, используя объект jQuery в качестве первого фактического аргумента:

(function ($) {

 // in this function, you can use the $ which refers to the jQuery object

}(jQuery));
person Andreas Grech    schedule 13.01.2011
comment
Итак... почему $ не определено? Он перезаписывается? - person JochenJung; 13.01.2011
comment
Это делается для того, чтобы избежать конфликтов с другими библиотеками Javascript, такими как Prototype. - person J.G.Sebring; 24.01.2012

arrow_upward
8
arrow_downward

Скорее всего, ваш скрипт не инициализирован таким образом, вам придется использовать Drupal.behaviors.YOURTHEMENAME

(function ($) {
Drupal.behaviors.YOURTHEMENAME = {
attach: function(context, settings) {

/*Add your js code here*/
alert('Code');

}

};
})(jQuery);
person Guus    schedule 22.07.2011
comment
разве вы не должны использовать }(jQuery)); вместо })(jQuery); в последней строке вашего кода? - person FLY; 11.04.2012
comment
Вы абсолютная легенда, это оно! Все слушайте, вот как это делается в Drupal!!!! - person weaveoftheride; 24.03.2013

arrow_upward
1
arrow_downward

«$ не является функцией» — очень распространенная ошибка, с которой вы можете столкнуться при работе с jQuery. Вы можете попробовать любые ответы, приведенные ниже:

(function($){
//your can write your code here with $ prefix
})(jQuery);

OR

jQuery(document).ready(function($){
//Write your code here
});

По сути, это позволит нашему коду запускаться и использовать ярлык $ для JQuery.

person Haripal Rao    schedule 08.03.2016

arrow_upward
1
arrow_downward

Вы можете создать отдельный файл для js, а затем добавить файл js, используя следующее:

drupal_add_js('path', 'module_name');
person Yisal Khan    schedule 08.03.2019