title: magento2: loading an uicomponent with Ajax
body: <p>I've been struggling with that for days...
  For an admin extension, I'm trying to load an uiComponent with Ajax to be displayed in a tab. The uiComponent is correctly loaded but seems not to be fully processed by client-side knockout logic. </p>
  
  <pre><code>namespace Man4x\MondialRelay2\Block\Adminhtml\Shipping;
  
  class Tabs
  extends \Magento\Backend\Block\Widget\Tabs {
  protected function _construct()
  {
      parent::_construct();
      $this-&gt;setId('mondialrelay2_shipping_tabs');
      $this-&gt;setDestElementId('container');
      $this-&gt;setTitle(__('MondialRelay'));
  } 
  
  protected function _beforeToHtml()
  {
      $this-&gt;addTab(
          'mass_shipping',
          [
              'label' =&gt; __('Mass Shipping'),
              'title' =&gt; __('Mass Shipping'),
              'url'   =&gt; $this-&gt;getUrl('*/*/massshipping', ['_current' =&gt; true]),
              'class'  =&gt; 'ajax'
          ]
      );
  
      return parent::_beforeToHtml();
  }
  }
  </code></pre>
  
  <p>Here is the simple controller layout:</p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  
  &lt;page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"&gt;
  &lt;container name="root" label="Root"&gt;
      &lt;uiComponent name="mondialrelay2_massshipping_grid"/&gt;
  &lt;/container&gt;
  </code></pre>
  
  <p></p>
  
  <p>Note: this custom uiComponent is perfectly functional when loaded in a standard (i.e. non-AJAX) way</p>
  
  <p>When tracking out AJAX response, I can see the correct HTML code for the uiComponent is loaded (included the Magento specific "x-magento-init" tag). It's then processed by the jquery-ui callback:</p>
  
  <pre><code>    this.xhr = $.ajax( this._ajaxSettings( anchor, event, eventData ) );
  
      // support: jQuery &lt;1.8
      // jQuery &lt;1.8 returns false if the request is canceled in beforeSend,
      // but as of 1.8, $.ajax() always returns a jqXHR object.
      if ( this.xhr &amp;&amp; this.xhr.statusText !== "canceled" ) {
          tab.addClass( "ui-tabs-loading" );
          panel.attr( "aria-busy", "true" );
  
          this.xhr
              .success(function( response ) {
                  // support: jQuery &lt;1.8
                  // http://bugs.jquery.com/ticket/11778
                  setTimeout(function() {
                      panel.html( response );
                      that._trigger( "load", event, eventData );
                  }, 1 );
              })
  </code></pre>
  
  <p>...for loaded HTML code to be inserted in the container tag.
  Then, a bunch of callbacks and hooks are processed in the js modules jungle. A "contentUpdated" event is finally triggered, causing the:</p>
  
  <pre><code>/**
   * Init components inside of dynamically updated elements
   */
  $('body').on('contentUpdated', function () {
      if (mage) {
          mage.apply();
      }
  });
  
  return $.mage;
  }));
  </code></pre>
  
  <p>mage/apply/main.js and mage/apply/scripts.js are then correctly called (as tracked down in the browser console) but... nothing happens. My loaded</p>
  
  <pre><code>&lt;script type="x-magento-init"&gt;
  </code></pre>
  
  <p>disappeared but my component JS logic doesn't process at all.</p>
  
  <p>Any enlightenment would be highly appreciated.</p>
  
  <p>PS: after deeper investigation, it seems that component JS files of the uiComponent are actually loaded, but not their templates !</p>