УрокКак обновить jQuery в Drupal на более позднюю версию

Вам нравятся сайты, которые содержат в себе красивые слайдшоу, раскрывающиеся менюшки, в меру динамичные плюшки? Конечно, кто ж не любит. С этим очень успешно справляется javascript, в частности его библиотека jQuery. Она создана чтобы упростить разработчикам жизнь при работе со скриптами. В ней имеется огромный набор полезных функций, благодаря которым в несколько строк можно написать поразительные вещи. Более того, имеется огромное количество уже готовых решений, подключив которые можно практически без знаний js получить желаемый результат в виде довольно неплохих визуальных эффектов.

По умолчанию Drupal 6 содержит в своём ядре библиотеку jQuery версии 1.2.6 (Drupal 7 - jQuery 1.4.4). Я предлагаю 2 варианта решения этой проблемы:

Вариант 1. Включение модуля jQuery Update.

Если вам будет достаточно иметь на сайте версию jQuery 1.3.2 (или 1.5.2 для Drupal 7) - достаточно просто скачать модуль jquery_update и включить его на сайте. Этот модуль не ломает скрипты, встроенные в ядро Друпала, поэтому его можно смело включать на любых проектах.

Вариант 2. Самостоятельное подключение библиотеки и использование jQuery.noConflict();

Для начала откройте page.tpl.php и подключите там библиотеку jQuery новой версии. Затем включите noConflict. Шапка сайта будет выглядеть приблизительно вот так:

<head>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript">
    var $jq = jQuery.noConflict();
  </script>
  <?php print $scripts; ?>
</head>

Далее используйте переменную $jq для работы с обновлённой версией jQuery:

$jq(document).ready(function(){
  $jq('#selector').some_function();
});

Чем удобен второй способ:

  • На странице работает стандартный jQuery 1.2.6, не ломая скрипты, написанные только под эту версию jquery
  • Скрипт грузится с ГуглАпи - вашему серверу не приходится отдавать лишнюю сотню килобайт на каждого пользователя на каждой странице

Комментарии

Аватар пользователя Тайный поклонник
Тайный поклонник написал:

За второй вариант спасибо, когда начинал работать с друпал, ещё не знал тогда, что в Друпал встроена уже библиотека, и когда подключал свою, то на сайте ломались многие скрипты, теперь знаю как править, если нужно:)

30.07.2011 11:57
Аватар пользователя Угу
Угу написал:

Крутая капча =))
888b 88 8b d8 ,ad8888ba, ad888888b, 88888888ba 88888888888
8888b 88 Y8, ,8P d8"' `"8b d8" "88 88 "8b 88
88 `8b 88 `8b d8' d8' a8P 88 ,8P 88
88 `8b 88 Y88P 88 ,d8P" 88aaaaaa8P' 88aaaaa
88 `8b 88 d88b 88 88888 a8P" 88""""""8b, 88"""""
88 `8b 88 ,8P Y8, Y8, 88 a8P' 88 `8b 88
88 `8888 d8' `8b Y8a. .a88 d8" 88 a8P 88
88 `888 8P Y8 `"Y88888P" 88888888888 88888888P" 88888888888

30.07.2011 20:48
Аватар пользователя Евгений
Евгений написал:

Не знаю как для старых версий, но для Drupal7 способ не работает. Мало того, что продолжает подгружаться старая версия jquery, так новая версия конфликтует с большим количеством встроенных в ядро скриптов. Я попытался подгрузить jquery 1.6.3, но не соображу, как же убрать массу лишнего мусора:
- jquery.js?v=1.4.4
- jquery.once.js?v=1.2
- drupal.js?lxyn8u
- jquery.ui.core.min.js?v=1.8.7
- jquery.ba-bbq.js?v=1.2.1
- overlay-parent.js?v=1.0
- jquery.cookie.js?v=1.0
- toolbar.js?lxyn8u
Ужас, сколько всего ,неудивительно, что ни один скрипт не работает!

18.01.2012 01:02
Аватар пользователя Евгений
Евгений написал:

Не подскажите, почему скрипт, работающий на jquery.js?v=1.4.4 не работает на Drupal7, где автоматом подгружается эта библиотека? помимо этой библиотеки используется скрипт вызова функции (простенький слайдер):

Я его вставляю в html.tpl.php между print $scripts; и

18.01.2012 01:12
Аватар пользователя ice
ice написал:

Код в студию и по возможности ссылку .

18.01.2012 01:18
Аватар пользователя Евгений
Евгений написал:

Вот этот скрипт (слайдер) - http://bxslider.com/

А пока что я в файле темы html.tpl.php из хедера убрал переменную $scripts, чтобы не загружался мусор, идущий в комплекте Друпала и здесь же подключил скрипты явно. Скрипт, кстати, работает как на jquery 1.4.х, что входит в стандартное подключение по умолчанию в Друпал7, так и на 1.6.3.
Теперь без родных скриптов все работает нормально.

Меня огорчило то, что в Друпал зачем-то загружается jquery, который не работает должным образом, а также много лишнего кода для админки, который создает проблемы для расширения функционала сайта. Конечно, разработчики - люди не глупые, но мне кажется более целесообразным выход на админку делать по отдельному адресу, чтобы не делать загрузку десятка .js + .css. А без этого нагромождения кода не зайти в админку.

18.01.2012 18:20
Аватар пользователя Евгений
Евгений написал:

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

18.01.2012 18:26
Аватар пользователя ice
ice написал:

"$" пробовали заменить на "jQuery" ?

18.01.2012 18:54
Аватар пользователя Евгений
Евгений написал:

Прошу прощения, не понимаю. Заменить где?

18.01.2012 18:58
Аватар пользователя ice
ice написал:

В вашем скрипте .

18.01.2012 18:59
Аватар пользователя Евгений
Евгений написал:

А да, пробовал. Результат идентичный (скрипт не работает).

18.01.2012 19:11
Аватар пользователя ice
ice написал:

Давайте по порядку , что на данный момент включено и каким образом вы подключаете ваш чудо слайдер .

18.01.2012 19:14
Аватар пользователя Евгений
Евгений написал:

Чтобы скрипт заработал, необходимо:
1) подключить библиотеку jqurey 1.4.4 и выше (с версиями ниже я не тестировал, а с 1.4.4 и выше - работает одинаково)
2) отдельный файл скрипта jquery.bxSlider.min.js
3) написать код скрипта в хедер. У меня это

	<script type="text/javascript">
    $(document).ready(function(){
      $('#slider1').bxSlider({
      mode: 'fade',
      auto: true,
      autoControls: false,
      autoHover: true,
      pager: false,
      controls: true
      });
      }); 
     </script>

3) На странице сайта добавляю html для идентификации слайдов - внутри

<div id="slider1"></div>

У меня Друпал7. Прикручиваю тему (она самостоятельно работает без сбоев, т.к. пока всего одно слайд-шоу - это). Пока без модулей и контента - просто вывод html. Т.е. вывод хедера и скриптов средствами Друпал, а

<body></body>

уже просто html моего шаблона

1) в файле темы .info подключаю скрипты -

scripts[] = http://code.jquery.com/jquery-latest.js
scripts[] = js/jquery.bxSlider.min.js

- первый скрипт может быть заменен jquery1.4.4.min, который есть в стандартной поставке Друпал, поэтому я его и отключал и подключал - одинаково не работает.
- второй в папке js

2) В html.tpl.php в конце хедера вставляю код скрипта:

	<script type="text/javascript">
    $(document).ready(function(){
      $('#slider1').bxSlider({
      mode: 'fade',
      auto: true,
      autoControls: false,
      autoHover: true,
      pager: false,
      controls: true
      });
      }); 
     </script>

И не работает.

Когда в html.tpl.php убрал переменную $scripts и вставил скрипты, то только так работает.

P.S. Спасибо вам за участие.

18.01.2012 19:42
Аватар пользователя Евгений
Евгений написал:

P.P.S. Про кэш не забываю.
Пробовал через

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript">
    var $jq = jQuery.noConflict();
  </script>

Тогда скрипт в хедере:

  	<script type="text/javascript">
    $jq(document).ready(function(){
      $jq('#slider1').bxSlider({
      mode: 'fade',
      auto: true,
      autoControls: false,
      autoHover: true,
      pager: false,
      controls: true
      });
      }); 
     </script>

Но это не меняет ничего, только дважды происходит загрузка jquery 1.4.4

Вот незадача! Заказчик хочет именно на Друпале сайт. На wordpress или Joomla все это делается элементарно и без загрузки кучи хлама. В Joomla загружаемые скрипты легко отключаются. Wordpress тоже много чего загружает изначально, но там бороться с этим варварством у меня получается, поэтому я начинаю субъективно относиться к Друпалу.

18.01.2012 19:55
Аватар пользователя ice
ice написал:
<script type="text/javascript">
     jQuery(document).ready(function(){
       jQuery('#slider1').bxSlider({
      mode: 'fade',
      auto: true,
      autoControls: false,
      autoHover: true,
      pager: false,
      controls: true
      });
      }); 
     </script>

Вы так записывали ?

"$scripts" должен быть на месте .

Без "noConflict" .

18.01.2012 20:00
Аватар пользователя Евгений
Евгений написал:

И так тоже записывал.

18.01.2012 20:07
Аватар пользователя ice
ice написал:

У меня уже спортивный интерес разгорелся .
В профиле есть мои контактные данные , выйдите на связь .

18.01.2012 20:11
Аватар пользователя Евгений
Евгений написал:

Эхх... у меня аськи нет, только скайп и e-mail. 20 минут зарегистрировался на сайте, жду письма с инструкциями.

Я частично решил проблему. Через несколько минут отпишусь.

18.01.2012 20:48
Аватар пользователя Евгений
Евгений написал:

Итак, я удалил из файла описания темы che_svai.info все вызовы скриптов.
Затем создал файл temlates.php, т.к. на странице сайта по темизации, прочитанной еще раз, ничего не было сказано про вызов скриптов в Друпале7, только для 6 версии, однако там что-то было про templates.php.
В templates.php я попробовал вывести мои скрипты:

<?php 
if (drupal_is_front_page()) {
drupal_add_js(drupal_get_path('theme', 'che_svai') . '/js/jquery.bxSlider.min.js');
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery('#slider1').bxSlider({
      mode: 'fade',
      auto: true,
      autoControls: false,
      autoHover: true,
      pager: false,
      controls: true
      });
      }); 
     </script>

Файлу html.tpl.php я вернул первоначальный вид (с предустановленными скриптами и Css) - и заработало.
Я попробовал еще убрать из temlates.php вызов jquery, т.к. эту версию выводит сам друпал7 по умолчанию, но мечтам моим не удалось сбыться и в итоге все работает, но с двойным выводом jquery1.4.4

18.01.2012 20:59
Аватар пользователя ice
ice написал:

Если вы убрали:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

а библиотека все равно дублируется , значит кеш не очищен , других вариантов не может быть .

18.01.2012 22:31
Аватар пользователя Евгений
Евгений написал:

я не убирал, т.к. если убрать, то без двойного вызова скрипта слайдер не работает

Минус вышеописанного способа в том, что код

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery('#slider1').bxSlider({
      mode: 'fade',
      auto: true,
      autoControls: false,
      autoHover: true,
      pager: false,
      controls: true
      });
      }); 
     </script>

выводится до

<html>
20.01.2012 00:33
Аватар пользователя Spleshka
Spleshka написал:

Вы неправильно пишите скрипт. В D7 это должно выглядеть так:

(function($) {
 
Drupal.behaviors.themeName = {
  attach: function (context, settings) {
 
    $('#slider1', context).bxSlider({
      mode: 'fade',
      auto: true,
      autoControls: false,
      autoHover: true,
      pager: false,
      controls: true
    });
 
  }
};
 
})(jQuery, Drupal);

Вам нет необходимости подключать дополнительных библиотек или менять версию jquery. Всё должно работать и так.

20.01.2012 02:33
Аватар пользователя Евгений
Евгений написал:

А этот вариант - вообще мертвый!
Ни без двойной погрузки Jquery 1.4.4, ни с ней - такая запись, как вы предлагаете не работает.
Пусть скрипт написан более правильно, но не работает.

27.01.2012 03:29
Аватар пользователя Spleshka
Spleshka написал:

значит, проблема где-то у вас. Либо в скрипте, либо вы не подключаете скрипт, либо ещё где. Смотрите что консоль пишет.

27.01.2012 14:21
Аватар пользователя ice
ice написал:

Хотелось бы посмотреть что у вас там за чертовщина iwan.grushin@yandex.ru

20.01.2012 01:11
Аватар пользователя ice
ice написал:

Хозяин вовремя явился )

20.01.2012 02:38
Аватар пользователя Александра
Александра написал:

Спасибо за статью!!! Очень помогли) все получилось) скрипты не конфликтуют и все работает, как нужно!

20.12.2012 16:33
Аватар пользователя Вадим
Вадим написал:

Долго я голову ломал чтоб bxslider прикрутить (4 - тую версию) для 3-ей есть модуль (использует вьювс)

Сам сайт bxslider сделан на друпале что не сложно понять открыв исходный код html
перейдя в 3ю версию и открыв исходник видим
(function($){
$(function(){
$('#slider1').bxSlider();
});
}(jQuery))

для четвертой я использую код

сам я в джаваскрипте ноль полный нашел методом тыка
если подскажете как будет правильней буду благодарен

07.05.2013 15:41
Аватар пользователя Вадим
Вадим написал:

для 3 тей

(function($){	
	$(function(){
		$('#slider1').bxSlider();
	});	
}(jQuery))
</script>

для 4 той

<script type="text/javascript">
(function($){	
  $(function(){
    $('.bxslider').bxSlider({
    adaptiveHeight: true,
  mode: 'fade'
    });
  });	
}(jQuery))
</script>
07.05.2013 15:43
Аватар пользователя sergeybelya
sergeybelya написал:

Модуль https://drupal.org/project/jqmulti решает эту задачу.

25.09.2013 12:33

Комментировать