@DickieDick

Как добиться выполнения файла script.js и других скриптов при подгрузке верстки компонента по AJAX?

Здравствуйте!

Кастомизирую шаблон компонента сравнения товаров catalog.compare.result в составе компонента catalog. При удалении товара из сравнения выполняется ajax-запрос, который подтягивает верстку компонента catalog.compare.result с обновленными данными.

Натягиваемая верстка содержит в себе многочисленные JS-украшательства, такие как слайдеры slick, которые инициализируются в файле script.js шаблона компонента catalog.compare.result. При первом открытии все работает как надо, но разумеется, после удаления товара из сравнения эти слайдеры разваливаются, так как их инициализации в возвращаемом по AJAX фрагменте верстки не происходит.

Чтобы не отнимать много времени, сразу вопрос: есть ли какой-то наиболее типовой, предпочтительный и адекватный способ добиться отработки кода из script.js в ситуации, когда компонент подгружается/обновляется через AJAX? Либо, если такое невозможно, добиться отработки скриптов из прочих файлов, допустим если код вынесен в файл test.js, и этот файл подключается в template.php:
<!--  ** верстка слайдера **  -->
<script src="<?=$templateFolder?>/test.js"></script>


Далее расскажу о том, что уже пробовал, прошу прощения за сумбурность.

Немногим ранее я решал похожую задачу: в списке товаров (catalog.section) нужно было реализовать кнопку "быстрого просмотра", которая открывала бы модальное окно с компонентом catalog.element, выводящим выбранный товар. Я создал отдельный файл с вызовом компонента catalog.element, на который отправлял ajax'ом ID выбранного товара, а в ответ мне приходила верстка этого компонента:

...
$APPLICATION->ShowAjaxHead(false, false, false, true);
$APPLICATION->IncludeComponent("bitrix:catalog.element", ... );
...


В тот раз мне помог вызов метода ShowAjaxHead() перед вызовом компонента. Благодаря нему файл script.js выполнялся, и в модальном окне работали кнопки добавления в корзину.

Но теперь все выглядит как-то сложнее, ведь я нахожусь в комплексном компоненте. Пробовал вызвать ShowAjaxHead() в файле compare.php, перед вызовом компонента catalog.compare.result, но в таком случае все работает совсем некорректно. Размещал ShowAjaxHead() также в других местах, но в лучшем случае просто не получал никакого результата.

Также делал попытки пойти другим путем. В файле script.js шаблона компонента содержится функция deleteResult(), которая принимает обновленную верстку компонента. Я вынес скрипты, инициализирующие слайдеры, в отдельный файл test.js и подключил в файле template.php тегом script, а в функции deleteResult() попробовал обработать приходящую в параметр result верстку методом BX.processHTML, чтобы вычленить из нее скрипты и выполнить их методом BX.ajax.processScripts(). Но в свойстве SCRIPT возвращаемого объекта лежит пустой массив:

CompareClass.prototype.deleteResult = function(result)
	{
		var processed = BX.processHTML(result, false);
		console.log(processed); // в processed.SCRIPT - пустой массив

		BX.closeWait();
		BX.onCustomEvent('OnCompareChange');
		BX(this.wrapObjId).innerHTML = result;
	};


Правда, вынесение инициализации слайдеров в отдельный файл test.js и подключение его тегом script все же дало некоторый эффект: когда мы удаляем из сравнения первый товар, файл срабатывает и слайдеры инициализируются. Но если вслед за ним удалить второй товар, то файл test.js перестает отрабатывать, хотя в html тег script, подключающий его, присутствует. Не понимаю, почему так происходит... В общем, задолбался я уже, наверняка решение есть, и оно где-то рядом, но я совсем уже ничего не соображаю(
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы