How to correctly connect the widget via ajax?

Question

JavaScript

Good afternoon, in the course of development I encountered one problem.

When the button is clicked, an ajax request is sent and the initialized widget is returned. The problem is that everything returns without an error, but js does not work and css is not connected. I use a third-party plugin in the widget .
The result is an endlessly spinning spinner, although there should be a tagged field.


This is how I make the request:

$.ajax('/user/employee-manage/load-tags', {
                    type: 'post',
                    data: {
                        'ids' : employeesChecked
                    },
                    success: function (response) {
                        console.log(response);
                      $('.panel-employee-tag').append(response)
                      
                    }
                });

The controller returns the result in JSON format:

public function actionLoadTags()
{
      return TagsPanelWidget::widget();
}

Widget template:

<?php
use kartik\select2\Select2;
?>
<?= Select2::widget([
    'name' => 'color_2',
    'value' => ['red', 'green'],
    'maintainOrder' => true,
    'options' => ['placeholder' => 'Select a employees ...', 'multiple' => true],
    'pluginOptions' => [
        'tags' => true,
    ],
]);
?>

The result is returned like this:

<span id="parent-s2-togall-w0" style="display:none"><span id="s2-togall-w0" class="s2-togall-button s2-togall-select"><span class="s2-select-label"><i class="glyphicon glyphicon-unchecked"></i>Выбрать все</span><span class="s2-unselect-label"><i class="glyphicon glyphicon-check"></i>Отменить выбор</span></span></span><div class="kv-plugin-loading loading-w0">&nbsp;</div><select id="w0" class="form-control" name="color_2[]" multiple size="4" data-s2-options="s2options_ae5051fd" data-krajee-select2="select2_11baaf42" style="display:none">
<option value="red" selected>red</option>
<option value="green" selected>green</option>
</select>

I suspect that the problem is that it does not load js in the plugin itself.
How is it possible to fix this problem?

Answer 1

The easiest way is to return not the widget itself, but a view with it and use the renderAjax method specially made for this
public function actionLoadTags()
{
return $this->renderAjax('view_file_name');
}
Then all dependencies will be connected, and without duplicates, the render does not use layout and everything will be fine. Well, in the view file, render the widget itself, or maybe something else.