How to detect JS event b and solve Uncaught Error: The toolbar instance with the same 'id' already exists?

Question

Bitrix24

Good afternoon. Please tell me how to solve.
When updating the box, the interface of the commercial offer has changed (became the same for deals and leads).
In the old interface, a tab was added that opened the grid from a custom module with data output from the database.
After the update, we added the result_modifier.php file to the crm.entity.details template, slightly modifying it from the previous interface. Necessary tabs were added
When clicking on a tab, the grid with data opens, but there was a problem of the following kind.
When you click on the "grid view" setting gear and select additional columns, after saving we get an empty grid on the screen and an error

script.js?16424091709846:20 Uncaught Error: The toolbar instance with the same 'id' already exists in the console.
at Object.create (script.js?16424091709846:20:11)
at :534:23
at Function.BX.evalGlobal (core.js:2096:1)
at inlineScripts (core_ajax.js:522:1)
at core_ajax.js :527:1
at core.js:2488:1
at load (core.js:2562:1)
at loadAsync (core.js:2483:1)
at Function.BX.load (core.js:2409:1)
at Function.BX.ajax.processScripts (core_ajax.js:526:1)
I can't find it - where we pass an invalid id or don't define it, what is happening
How to figure it out? Thanks

Answer 1

After the update, we added the result_modifier.php file to the crm.entity.details template, slightly modifying it from the previous interface. Necessary tabs added

This component no longer needs to be modified.
Tabs can be added at the event: https://dev.1c-bitrix.ru/api_d7/bitrix/crm/systemc...
This is the most correct way

When you click on the tab, the grid with the data opens, but there was a problem of the following kind.

That's right - it's just that the method that was previously used is not suitable for the new card.
Let's start by understanding how the new card works. When the user opens the detail page, the card opens, but only 3 parts are physically loaded: the first page, the products page, and the general layout, which is the tab handler. When you click on a tab, a request is made that loads that tab's data onto the page and displays it to the user.
If you are processing a POST request in your component, for example, a form, then by submitting you will find that your component is not loaded (and as a result has not processed the POST request), and the first page is displayed to you.
Now about the work of the grid.
In order to accept the settings, the grid uses a POST request. If the parameters where to send the POST request are not passed, then this request will be directed to the same page that is currently open. Those. understand that you did not pass the url, so the situation above occurs - a POST request is sent to a page where your component with a grid is not present. From here he cannot get an answer and his behavior is what you see.
How to overcome this happiness?
1. Create a physical page on which to place the component.
2. On this page, set the OPTIONS_HANDLER_URL and BACKEND_URL parameters for the grid component
. 3. Use events to add the page from p.1 to the tab.