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');

• Claudiu Creanga: this makes mage re-evaluate the whole page. what you want is mage to look only into the specified div. is it possible?
• Magecode: I have to use this with products load by infinite ajax scroll. I am using this github.com/manishjoy/magento2-catalog-infinite-scroll but after scroll add to cart button is not working and reload page.
• Jafar Pinjar: @Magecode, did you got the solution, I am also facing same issue
• Payal Patel: I am also facing same issue. Any one have a solution?
• Zahirabbas: $('#gallery').trigger('contentUpdated'); not working