How to organize an AJAX form with caching enabled on our component page on a site running 1C-Bitrix?

Question

JavaScript

The task is to organize an AJAX form inside the catalog component on the detail.php page with catalog.element.
You need to pass data about the product itself to the component with the form, and therefore I placed the form in the catalog.element component.
The problem is that when sending data via ajax, the cached html catalog.element and the code are returned

$request = \Bitrix\Main\Context::getCurrent()->getRequest();
if(strtoupper($request->get("AJAX")) == "Y" && $arResult["PARAMS_HASH"] == $request->get("PARAMS_HASH")){}

does not work. In general it is similar that the component with the form does not work.

Answer 1

You can connect the form not in template.php catalog.element, but in component_epilog.php
If you need to pass some product data to the form, you can add this data to component_epilog in result_modifier using

<?
$arResult["FORM_DATA"] = [];
$this->__component->SetResultCacheKeys(["FORM_DATA"]);

Just do not need to add redundant data using this method, otherwise the cache will be unreasonably large