Почему не срабатывают скрипты Jquery в Drupal 7?

Собственно говоря, чем мы сегодня займёмся понятно из названия этой статьи. Раньше в Drupal 6, я писал свои скрипты и подгружал их к страницам сайта без особых проблем – правильно написанный скрипт всегда работал без сбоев. Но при переходя на Drupal 7, столкнулся с такой проблемой, что мои, замечу синтаксически правильно написанные скрипты отказывались работать под семёркой. Пришлось лесть опять в Api Drupal и более внимательно перечитывать, что они там понаделали.

Распишу всё на конкретном примере: Допустим мы хотим свернуть «стандартное меню навигации» по клику по какому то элементу на странице. С первого взгляда очень даже простая задача.

Приступим. В примере я использую стандартный шаблон «Bartik». Для начала нам необходимо определиться кликая по какому элементу на странице у нас будет происходить сворачивание меню навигации, я предлагаю создать свой элемент, в качестве которого у нас будет выступать просто текст. Для этого открываем файл нашей темы page.tpl.php и перед выводом левого сайдбара впишем свой элемент и присвоим ему id под названием «clickFirst».

Теперь приступим к написанию самого скрипта. Создадим текстовый файл с название «myscript.js», его содержание вот такое:

$(document).ready(function() { 
    $('#clickFirst').css({
	'cursor':'pointer',
	'text-transform':'uppercase',
	'color':'#ff0000',
	'font-size':'12px'
	});
	$('#clickFirst').toggle(
	function(){
	$('#block-system-navigation').slideUp(200);
	$('#clickFirst').text('Развернуть меню навигации');
	},
	function(){
	$('#block-system-navigation').slideDown(200);
	$('#clickFirst').text('Свернуть меню навигации');
	}
	);
});

Естественно для его выполнения нужна ещё и библиотека Jquery, я использовал 1.8, скачать можно с официального ресурса. И как бы на этом наша работа должна была бы и закончиться, остаётся только подключить нашу новую библиотеку Jquery и скрипт myscript.js к сайту. Как правильно подключать скрипты можно почитать вот здесь, я на этом останавливаться не буду.

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

Так в чём же проблема? А проблема в том, что разработчики теперь требуют производить вызов функции через так называемый «noconflict», нужен он для того, что бы скрипты написанные под старые версии Jquery не конфликтовали с новыми, которые допустим как я написал из под Jquery 1.8. Т.е. теперь для вызова какой то функции в Jquery необходимо применять конструкцию вместо:

$();

Вот такую

jQuery.noConflict();

Теперь всё становится более ясно, давайте так и сделаем как говорит нам API. Новая конструкция очень длинная и при написании длинного скрипта будет очень не удобной, поэтому я предлагаю запихнуть её в переменную, допустим dr. Для этого создадим ещё один файл с название «noconflict.js» где его содержимое будет таким:

var $dr = jQuery.noConflict();

И так же подключим его через «info» файл к нашим страницам на сайте. И теперь нам осталось лишь переписать вызов функции исходя из нашей переменной, которая лежит в файле «noconflict.js». Открываем файл «myscript.js» и пишем следующее:

$dr(document).ready(function() { //noconflict для drupal 7
    $dr('#clickFirst').css({
	'cursor':'pointer',
	'text-transform':'uppercase',
	'color':'#ff0000',
	'font-size':'12px'
	});
	$dr('#clickFirst').toggle(
	function(){
	$dr('#block-system-navigation').slideUp(200);
	$dr('#clickFirst').text('Развернуть блок навигации');
	},
	function(){
	$dr('#block-system-navigation').slideDown(200);
	$dr('#clickFirst').text('Свернуть блок навигации');
	}
	);
});

И теперь смотрим, что у нас на сайте получилось

Скрипт работает, что нам и требовалось.