Magento2: Ui Components in Ajax Response

[Pigau]

It is not possible to properly load an ui component in a popin content loaded in ajax. On a standard page it works well, but as a ajax result, it won't.

Preconditions

1. Magento 2.1.5

Steps to reproduce

1. Create a Ui Component
2. Use it in a template :

<div  data-bind="scope:'myComponent'" data-mage-init='
    {
        "Magento_Ui/js/core/app": {
            "components": {
                "myComponent": {
                    "component": "My_Module/js/my-component"
                 }
            }
        }
    }
'>
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

1. Load it dynamically in your page

$.ajax(this.url)
.done(
    function(data) {
        this.modalContainer.html(data);
        this.modalContainer.trigger('contentUpdated');
    }
);

Expected result

1. The data-mage-init part should be remove from the DOM and interpreted, and my component should appear in my popin.

Actual result

1. The data-mage-init part should is removed, but my component container stay empty.
   The <!-- ko template: getTemplate() --><!-- /ko --> doesn't seem to be interpreted.

[itg-ddanielson]

having this issue in 2.1.8 any resolution yet?

[danilkrasnorudskyi]

Hi, it is happen because in UiRegistry already exist data of Ui Component, try to clear Ui Registry, and reinit Ui Component. Something like that
$('.yourSelector').click(function () { uiRegistry.remove(scopeName); $.ajax({ url: url, success: function (response) { $('.main').replaceWith($(response).find('.main')); $('.main').trigger('contentUpdated'); //reinit your Ui Component $('.main').applyBindings(); //apply new data } }) }

[magento-engcom-team]

Hi @Pigau
Could you please let us know if the issue is still actual? Thank you

[magento-engcom-team]

@Pigau, we are closing this issue due to inactivity. If you'd like to update it, please reopen the issue.

[PardeepGrover]

Hi ,I am also facing the same issue.Want to reload the ui component grid in poup

[pratikhmehta]

Hi, it is happen because in UiRegistry already exist data of Ui Component, try to clear Ui Registry, and reinit Ui Component. Something like that
$('.yourSelector').click(function () { uiRegistry.remove(scopeName); $.ajax({ url: url, success: function (response) { $('.main').replaceWith($(response).find('.main')); $('.main').trigger('contentUpdated'); //reinit your Ui Component $('.main').applyBindings(); //apply new data } }) }

Thank you so much.

[harrigo]

Hi, it is happen because in UiRegistry already exist data of Ui Component, try to clear Ui Registry, and reinit Ui Component. Something like that
$('.yourSelector').click(function () { uiRegistry.remove(scopeName); $.ajax({ url: url, success: function (response) { $('.main').replaceWith($(response).find('.main')); $('.main').trigger('contentUpdated'); //reinit your Ui Component $('.main').applyBindings(); //apply new data } }) }

Can you maybe explain this a bit better for me i'm trying something similar however having great difficulty, I asked a question https://magento.stackexchange.com/questions/275656/load-a-ui-component-with-ajax-within-admin-tab however not had much luck and hoping it is a simple fix like yours.

[urbanovich]

@danilkrasnorudskyi Thanks! It works for me.

*.html:

<div id="own_image" data-bind="scope:'own_image'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

*.js:

initialize: function () {
            this._super();

            $('#' + this.name).applyBindings();

        },