Есть шаблон form.result.new. Как прикрутить Ajax?

Question

[KTG]

Собственно набросал в редакторе форму, включил отметку использовать шаблон по умолчанию.
Вывел на страницу через визуальны редактор элемент "заполнение веб-формы" (form.result.new).
У компонента скопировал template.php и внес туда изменения (добавил hidden поле).

Теперь возник вопрос - как прикрутить туда Ajax? Смотрел везде настройки - нигде нет.
В настройки компонента лезть не хочется, т.к. могут быть формы которым ajax не нужен

Comments

[KTG]

Нарыл что в папке с шаблоном можно создать файл .patametrs.php и дополнять параметры компонента.
Осталось понять что туда писать?
В компоненте "form" есть намёк на AJAX: "AJAX_MODE" => array(). Но подобного не нашел в form.result.new

Answer 1

[Роман Грицук]

В параметры компонента добавить
"AJAX_MODE" => "Y"

Comments

[KTG]

не работает.
создал рядом с шаблоном файл .parameters.php

if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();

$arComponentParameters = array(
	"PARAMETERS" => array(
		"AJAX_MODE" => "Y"
		)
	)

[KTG]

проверяю $arParams - не получает такого параметра

[Роман Грицук]

Просто кодом добавьте.
Например так

<?$APPLICATION->IncludeComponent(
	"bitrix:form.result.new", 
	".default", 
	array(
		"CACHE_TIME" => "3600",
		"CACHE_TYPE" => "A",
		"CHAIN_ITEM_LINK" => "",
		"CHAIN_ITEM_TEXT" => "",
		"EDIT_URL" => "",
		"IGNORE_CUSTOM_TEMPLATE" => "N",
		"LIST_URL" => "",
		"SEF_MODE" => "N",
		"SUCCESS_URL" => "",
		"USE_EXTENDED_ERRORS" => "N",
		"WEB_FORM_ID" => "1",
		"COMPONENT_TEMPLATE" => ".default",
		"VARIABLE_ALIASES" => array(
			"WEB_FORM_ID" => "WEB_FORM_ID",
			"RESULT_ID" => "RESULT_ID",
		),
        "AJAX_MODE" => "Y"
	),
	false
);?>

[KTG]

Роман Грицук, простой шаблон выводится из компонента, и получает $arResult

Поменял содержимое файла на:
$arTemplateParameters и расписал внутрянку.
Так же в шаблоне локалии "lang/ru/" добавил строку $MESS ['TP_FBF_AJX'] = "AJAX";

$arTemplateParameters = array(
	"AJAX_MODE" => array(
		"NAME" => GetMessage("TP_FBF_AJX"),
		"TYPE" => "STRING",
		"DEFAULT" => "Y",
		)
	)

По итогу в визуальном редакторе можно найти настройку компонента Ajax.
Одна проблема осталась. При отправке формы - данные отправляются и записываются. НО!
Висит табличка "Загрузка" и больше ничего не происходит, да же обратного ответа нет. Хотя используется элемент "ответ формы".

[Роман Грицук]

Если вам не лень этим заниматься то можно и так. Проще просто в параметры компонента добавить AJAX_MODE => Y и всё.

[KTG]

Роман Грицук, а с сообщением "Загрузка" чего делать? И как ответ получить что все загрузилось?

[Роман Грицук]

Если в настройках веб формы стоит "Использовать свой шаблон формы", то что то из этого надо добавить в шаблон

[KTG]

Стоит "использовать шаблон формы по умолчанию"
и в настройках компонента "игнорировать шаблон".

[Роман Грицук]

Тогда надо смотреть Ваш шаблон компонента bitrix:form.result.new. В $arResult в template.php 100% это сообщение есть.

[KTG]

if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();

if($arResult["isFormErrors"] == "Y")
	{
		echo $arResult["FORM_ERRORS_TEXT"];
	};
print_r($arResult);
echo $arResult["FORM_NOTE"];

echo $arResult["FORM_HEADER"];                            

if ($arResult["isFormNote"] != "Y")
	{
//============== TABLE TITLE ====================/
		echo "<table>";
		if ($arResult["isFormDescription"] == "Y" || $arResult["isFormTitle"] == "Y" || $arResult["isFormImage"] == "Y")
			{
		echo "<tr><td>";
		if ($arResult["isFormTitle"])
			{
				echo "<h3>".$arResult["FORM_TITLE"]."</h3>";
			};
	
		echo "<p>".$arResult["FORM_DESCRIPTION"]."</p>";
		echo "</td></tr>";
	};
		echo "</table>";
//============== QUESTION ====================/
		echo "<table>";	

		foreach ($arResult["QUESTIONS"] as $FIELD_SID => $arQuestion)
			{

				if ($arQuestion['STRUCTURE'][0]['FIELD_TYPE'] == 'hidden')
					{
						if ($FIELD_SID == "IP")
							{
								$id = $arQuestion["STRUCTURE"][0]["ID"];
							        echo "<tr><td>"; 
							        echo "<input type='hidden' name='form_hidden_".$id."' value='".$_SERVER["REMOTE_ADDR"]."'>"; 
								echo "</td></tr>";
							}
						else 
							{
								echo $arQuestion["HTML_CODE"];
							}
					}
				else
					{
						echo "<tr><td>";
						if (is_array($arResult["FORM_ERRORS"]) && array_key_exists($FIELD_SID, $arResult['FORM_ERRORS']))
							{
								echo "<span class='error-fld' title='".$arResult["FORM_ERRORS"][$FIELD_SID]."'></span>";
							};
						echo $arQuestion["CAPTION"];
						if ($arQuestion["REQUIRED"] == "Y")
							{
								echo $arResult["REQUIRED_SIGN"];
							};
						if ($arQuestion["IS_INPUT_CAPTION_IMAGE"] == "Y")
							{
								echo "<br />".$arQuestion["IMAGE"]["HTML_CODE"];
							};

						echo $arQuestion["HTML_CODE"];
						echo "</td></tr>";
					}
			} //endwhile
			echo "<tr>";
			echo "<td><input ".(intval($arResult["F_RIGHT"]) < 10 ? "disabled=\"disabled\"" : "")." type='submit' name='web_form_submit' value='Submit' /></td>";
			echo "</tr>";
			echo "</table>";
		echo "<p>";
		echo $arResult["REQUIRED_SIGN"]." - ".GetMessage("FORM_REQUIRED_FIELDS");
		echo "</p>";
		echo $arResult["FORM_FOOTER"];
};

[Роман Грицук]

В $arResult["FORM_NOTE"]; будет сообщение об успешной отправке формы

[KTG]

Роман Грицук, да вот в том и дело что нет его.
Сделал print_r($arResult) и что-то не нашел разницы в содержимиом до отправки и после
$arResult["FORM_NOTE"] вообще отсутствует в $arResult...что странно.

При всем при этом результат сохраняется.

[KTG]

Пока получается вот что:
Если отключить использование ЧПУ на компоненте, и указать страницу результата на саму себя, то он выведет статус, но разумеется сделает перезагрузку страницы. Тут от AJAX не осталось ничего.

А если оставить ЧПУ - то он вообще никуда не отправляет. И ничего не происходит. Да и собственно нет цели показывать результат отправки формы.

[Роман Грицук]

Я вам приводил пример вызова компонента. Этот пример скопирован с действующего сайта, на котором всё работает: и ajax и сообщение об отправке.

[Сергей]

Давно добавили ajax_mode? Вроде как его там никогда не было https://dev.1c-bitrix.ru/user_help/components/serv...

[Роман Грицук]

ajax_mode - это общий параметр, который работает в большом количестве компонентов, и при этом его нет в документации

[Роман Грицук]

Даже больше. Этот параметр прекрасно работает в своих компонентах, при этом можно ни чего дополнительно не писать для поддержки ajax

[KTG]

Роман Грицук, Тогда получается я в template.php вызываю $APPLICATION->IncludeComponent.
Но как тогда добавлять hidden поля, вешать js обработчики. Ну или вообще кастомизировать форму?

[Роман Грицук]

Не совсем понял, то что вы написали. Где вы вызываете <?$APPLICATION->IncludeComponent("bitrix:form.result.new", ...... ???

Если компонент подключается в шаблоне другого компонента, то могут возникать разные "глюки". И если у вас так и сделано, то скорее всего в этом и есть проблема.

[Роман Грицук]

Попробуйте создать новый раздел, например /test/ и в /test/index.php разместить компонент form.result.new в том виде, как я скидывал ранее. Там только надо будет заменить WEB_FORM_ID на свой

[KTG]

Сделал больше.
Шаблон (template.php) который в папке сайта создавал - удалил.
Создал новую форму. В настройки шаблона вообще не лез.
Создал 1 вопрос и 1 статус.
На странице бросил элемент форма. У которого изначально есть флаг включения AJAX. В коде это так:

<?$APPLICATION->IncludeComponent(
	"bitrix:form",
	"",
	Array(
		"AJAX_MODE" => "Y",
		"AJAX_OPTION_ADDITIONAL" => "",
		"AJAX_OPTION_HISTORY" => "N",
		"AJAX_OPTION_JUMP" => "N",
		"AJAX_OPTION_STYLE" => "Y",
		"CACHE_TIME" => "3600",
		"CACHE_TYPE" => "A",
		"CHAIN_ITEM_LINK" => "",
		"CHAIN_ITEM_TEXT" => "",
		"COMPONENT_TEMPLATE" => ".default",
		"EDIT_ADDITIONAL" => "N",
		"EDIT_STATUS" => "Y",
		"IGNORE_CUSTOM_TEMPLATE" => "N",
		"NOT_SHOW_FILTER" => array("",""),
		"NOT_SHOW_TABLE" => array("",""),
		"RESULT_ID" => $_REQUEST[RESULT_ID],
		"SEF_MODE" => "N",
		"SHOW_ADDITIONAL" => "N",
		"SHOW_ANSWER_VALUE" => "N",
		"SHOW_EDIT_PAGE" => "Y",
		"SHOW_LIST_PAGE" => "Y",
		"SHOW_STATUS" => "Y",
		"SHOW_VIEW_PAGE" => "Y",
		"START_PAGE" => "new",
		"SUCCESS_URL" => "",
		"USE_EXTENDED_ERRORS" => "N",
		"VARIABLE_ALIASES" => Array("action"=>"action"),
		"WEB_FORM_ID" => "10"
	)
);?>

По итогу форма не отправляется. Да же не показывает страницу результата.
Данные с формы записывает.

Ладно, удалил элемент формы со страницы и через код вставил ваш пример. Подставил ID своей новой формы.

Мне кажется где-то причина за пределами компонента формы?

[Роман Грицук]

Вы только что привели пример совсем другого компонента.

1) НА чистой странице разместите вот это:

<? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php");
$APPLICATION->SetTitle("Задать вопрос");
?>

 <?$APPLICATION->IncludeComponent(
	"bitrix:form.result.new", 
	".default", 
	array(
		"CACHE_TIME" => "3600",
		"CACHE_TYPE" => "A",
		"CHAIN_ITEM_LINK" => "",
		"CHAIN_ITEM_TEXT" => "",
		"EDIT_URL" => "",
		"IGNORE_CUSTOM_TEMPLATE" => "N",
		"LIST_URL" => "",
		"SEF_MODE" => "N",
		"SUCCESS_URL" => "",
		"USE_EXTENDED_ERRORS" => "N",
		"WEB_FORM_ID" => "1",
		"COMPONENT_TEMPLATE" => ".default",
		"VARIABLE_ALIASES" => array(
			"WEB_FORM_ID" => "WEB_FORM_ID",
			"RESULT_ID" => "RESULT_ID",
		),
        "AJAX_MODE" => "Y"
	),
	false
);?><br><? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/footer.php") ?>

2)В этом коде замените только WEB_FORM_ID на свой.
3)Перед отправкой формы откройте консоль разработчика в браузере (F12) и перейдите на вкладку Network.
4) После отправки формы найдите запрос. Он будет выглядеть примерно так:

[KTG]

Вставил ваш код. Начал смотреть консоль (что давно пора было сделать)

Mixed Content: The page at 'https://mysite/razdel/' 
was loaded over HTTPS, but requested an insecure form action
'http://mysite/razdel/?WEB_FORM_ID=8&RESULT_ID=7776&…=addok&bxajaxid=823b0aa…&AJAX_CALL=Y'. 
This request has been blocked; 
the content must be served over HTTPS.

Хотя через ту же консоль смотрю в action формы там относительная ссылка стоит.
action="/razdel/"
Ссылка по которой форму смотрю в браузере:
https://mysite/razdel/

[Роман Грицук]

А что в консоли при загрузке страницы? Нет ни каких ошибок ?

[KTG]

Только одна, но она на всех страницах и была до меня

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at new qq.FileUploader (fileuploader.js:583)
    at createUploader ((index):101)
    at (index):113
    at HTMLDocument.ready (jcf.js:611)

Но это ошибка в коде js скрипта для загрузки файлов.
Других ошибок нет.

[Роман Грицук]

Нет ли случайно в вёрстке тега base https://webdesign.tutsplus.com/ru/articles/quick-t... ?? Можете дать ссылку на сайт? А то уже идёт гадание

[KTG]

Роман Грицук, тега нет.
Ссылку дать не могу - внутренний сайт, с внешки не доступен.

[Роман Грицук]

Тогда хз. Сам по себе ajax компонента работает. Остается найти пробелу с https.

[KTG]

Заметил ошибку в тесте битрикса. Ругался на LocalRedirect - внутреннее перенаправление.

добавил порт 443 в dbconn и все заработало.
Никто не признается где и что отключил, или какую настройку сделал. А это может быть и на прокси, и на веб-сервере, и в самом битриксе...