How to connect the widget via ajax?

Good afternoon, in the process of developing faced with the same problem.

Pressing the button sends ajax request and returns an initialized widget. The problem is that in vozvraschaetsya without error but not working js and css not connected. use a third-party widget plugin.
The result is an infinitely spinning spinner, although it should be the box with tags.
d0d545797df94442968209def25b4da8.png

So make a 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();
}


The template of the widget:

<?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 in this form:
<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>Select all</span><span class="s2-unselect-label"><i class="glyphicon glyphicon-check"></i>deselect</span></span></span><div class="kv-plugin-loading loading-w0"> </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 the problem is that not loads the js in the plugin.
How is it possible to fix this problem ?
June 27th 19 at 15:20
1 answer
June 27th 19 at 15:22
Solution
The easiest way is to return the widget itself and view it and use it, specially done for this method renderAjax
public function actionLoadTags()
{
return $this->renderAjax('view_file_name');
}
Then connect all the dependencies with it without duplicates, the renderer does not use the layout and everything will be fine. But in the view file to render the widget itself, and maybe something else.
Thanks for reply) it really is better, it returned to what it should, but the js still doesn't work. And not even there inserts where necessary the item.

For example:

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

?>
<?='View will be here'?>


The result :
26801f1798214c049b856a94136e7344.png

The tags had to be with the text but for some reason the result is not like this, and tags are also not created.

Returned although everything seems right:

<link href="/assets/1f0a4867/css/bootstrap.css" rel="stylesheet">
<link href="/assets/12be1c23/css/select2.css" rel="stylesheet">
<link href="/assets/12be1c23/css/select2-addl.css" rel="stylesheet">
<link href="/assets/12be1c23/css/select2-krajee.css" rel="stylesheet">
<link href="/assets/a61124ab/css/kv-widgets.css" rel="stylesheet">
<script type="text/javascript">var s2options_ae5051fd = {"themeCss":".select2-container--krajee","sizeCss":"","doReset":true,"doToggle":true,"doOrder":true};
window.select2_11baaf42 = {"tags":true,"theme":"krajee","width":"100%","placeholder":"Select a employees ...","language":"EN"};
</script><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>Select all</span><span class="s2-unselect-label"><i class="glyphicon glyphicon-check"></i>deselect</span></span></span><div class="kv-plugin-loading loading-w0"> </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>View will be here


<script src="/assets/23a130ee/jquery.js"></script>
<script src="/assets/12be1c23/js/select2.full.js"></script>
<script src="/assets/12be1c23/js/select2-krajee.js"></script>
<script src="/assets/12be1c23/js/i18n/ru.js"></script>
<script src="/assets/a61124ab/js/kv-widgets.js"></script>
<script type="text/javascript">initS2Order('w0',["red","green"]);
if (jQuery('#w0').data('select2')) { jQuery('#w0').select2('destroy'); }
jQuery.when(jQuery('#w0').select2(select2_11baaf42)).done(initS2Loading('w0','s2options_ae5051fd'));
</script>


Do not tell me what it can be connected ? - tristian_Maggio commented on June 27th 19 at 15:25
Well if you want that yii was connected scripts, and declare they need using yii, for example:
$this->regesterJsFile();
$this->regesterCssFile();

or is it the result?
Try to explicitly set id
<?= Select2::widget([
'id'=-->'someMyID'
 'name' => 'color_2',
.....

and yet - what in the console? There are mistakes? - Henderson_Beat commented on June 27th 19 at 15:28
code
<link href="/assets/1f0a4867/css/bootstrap.css" rel="stylesheet">
<link href="/assets/12be1c23/css/select2.css" rel="stylesheet">
<link href="/assets/12be1c23/css/select2-addl.css" rel="stylesheet">
<link href="/assets/12be1c23/css/select2-krajee.css" rel="stylesheet">
<link href="/assets/a61124ab/css/kv-widgets.css" rel="stylesheet">
<script type="text/javascript">var s2options_ae5051fd = {"themeCss":".select2-container--krajee","sizeCss":"","doReset":true,"doToggle":true,"doOrder":true};
window.select2_11baaf42 = {"tags":true,"theme":"krajee","width":"100%","placeholder":"Select a employees ...","language":"EN"};
</script><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>Select all</span><span class="s2-unselect-label"><i class="glyphicon glyphicon-check"></i>deselect</span></span></span><div class="kv-plugin-loading loading-w0"> </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>View will be here


<script src="/assets/23a130ee/jquery.js"></script>
<script src="/assets/12be1c23/js/select2.full.js"></script>
<script src="/assets/12be1c23/js/select2-krajee.js"></script>
<script src="/assets/12be1c23/js/i18n/ru.js"></script>
<script src="/assets/a61124ab/js/kv-widgets.js"></script>
<script type="text/javascript">initS2Order('w0',["red","green"]);
if (jQuery('#w0').data('select2')) { jQuery('#w0').select2('destroy'); }
jQuery.when(jQuery('#w0').select2(select2_11baaf42)).done(initS2Loading('w0','s2options_ae5051fd'));
</script>

Return EXIN. That is, the result of the renderer.

And in console no error no ( - tristian_Maggio commented on June 27th 19 at 15:31
: Then give screenshot or two of description.
Should be: and Is: - Henderson_Beat commented on June 27th 19 at 15:34
: Thank You very much ))) was assigned id and the start of work as necessary ) - tristian_Maggio commented on June 27th 19 at 15:37

Find more questions by tags JavaScriptPHPAJAXYii