h2o design - модули для Bitrix Marketplace

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

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

Ваше имя*
Ваш E-mail*
Сообщение*
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке*

Купить в Marketplace