Назад к списку модулей

AJAX для любого компонента

Купить в Marketplace

Описание:

Модуль является улучшенной альтернативой стандартного механизма AJAX в битриксе, так как обладает более высоким быстродействием и для его использование не нужны глубокие знания Bitrix Framework. Модуль универсален - он работает с любой компонентой из стандартной поставки Bitrix, без необходимости изменения ее кода (достаточно изменить только файлы шаблона).

Модуль рассчитан на разработчиков, поэтому начальные знания Bitrix Framework и jQuery необходимы для успешной интеграции модуля в компоненты.

Простейший способ использования:

Разберем интеграцию AJAX в компоненту на примере main.feedback, позволив отправлять сообщение обратной связи без перезагрузки страницы.

Для начала получим для данной компоненты идентификатор AJAX для компоненты в файле result_modifier.php:

	$arParams['AJAX_ID'] = CH2oAjax::getComponentID($this->__component);
	

Далее в шаблоне компоненты (template.php) привязываемся к событию отправки формы и при срабатывании вызываем jquery-метод модуля:

	<script type="text/javascript">
		$(document).on('submit', 'div.mfeedback form', function (e) {
			e.preventDefault();
			$(this).bitrixAjax(
				"<?=$arParams['AJAX_ID']?>",
				function (data) { 
					$('div.mfeedback').html(data.find('div.mfeedback').html());  
				},
				{
					post: {
						submit: 'Y'
					}
				}
			);
		});
	</script>
		

Поясним, как это работает:

Останавливаем стандартную отпраку формы, чтобы предотвратить перезагрузку страницы:

	e.preventDefault(); 
	

Вызываем у формы метод модуля:

	$(this).bitrixAjax( ... );
	

Передаем идентификатор ajax вызова, полученный в файле result_modifier.php:

	"<?=$arParams['AJAX_ID']?>"

Устанавливаем анонимную функцию-обработчик, который будет вызван после того как запрос будет обработан, data - это jquery html-объект с ответом от сервера.

В функции заменяем контейнер div.mfeedback на такой-же контейнер из ответа сервера:

	function (data) { 
		$('div.mfeedback').html(data.find('div.mfeedback').html());  
	}

Данный код необходим, поскольку input с типом "submit" не отправляется на сервер, поэтому необходимо вручную передать параметр submit='Y':

	{
		post: {
			submit: 'Y'
		}
	}

Важно!

Для того, чтобы при интеграции модуля в какую-либо компоненту не возникало проблем, необходимо точно знать, какие параметры и как необходимо передавать в данную компоненту.

По этой причине настоятельно рекомендуем при интеграции ajax модуля предварительно изучать особенность поведения той компоненты, куда производится интеграция.

DEMO

Купить в Marketplace