Magento2 <script type="text/x-magento-init"> after ajax

Question

Lets say I want to get ajax response containing everything that is inside #maincontent selector on catalog/product/view/id/1 page.

The problem is that many JS (that works on product view page) doesn't work when I append ajax response html to my custom page (lets say my custom page is some category view page).

I noticed that scripts (from ajax response html) inside doesnt work. like product gallery. How to make the scripts work? I noticed that after I add a product (using add to cart button from the response) the JS in start to work - gallery becomes visible, related products show up, tabs working etc.

Answer 1

It is very easy to solve.

Look in this line: https://github.com/magento/magento2/blob/develop/lib/web/mage/mage.js#L93

Here mage waiting when you insert html content with ajax: "text/x-magento-init".

Example:

you insert to

<div id="gallery"></div>
$('#gallery').html(content)

After call magento:

$('#gallery').trigger('contentUpdated');