yii2 kartik select2 插件在模态下不起作用

Posted 2023-05-07

【中文标题】yii2 kartik select2 插件在模态下不起作用

【英文标题】：yii2 kartik select2 plugin doesnt work in modal

【发布时间】：2017-01-31 15:59:12

【问题描述】：

当我尝试在模态中使用kartik select2 插件时，下拉菜单不会出现。当我在没有模态的情况下使用它时，它就像魅力一样。 这是从插件网站获取的相同代码，但它仍然不起作用。我在浏览器生成的源代码中发现 select2 插件 css 和 js 没有从 assets 文件夹中加载

这就是 html 的外观

   Modal::begin([

    'header' => '<h1>Assign Applicant</h1>',
    'options' => [
        'id' => 'assignApplicantModal',
        'tabindex' => false
    ],
]);
?>


<div class="job-positions-form">

    <?php
    $form = ActiveForm::begin();
    ?>
    <div class="row">
        <div class="col-sm-12">
            <div class="col-sm-6">

                <?php
                $data = ArrayHelper::map(Applicant::find()->where('status = :status', [':status' => 'Active'])->all(), 'id', function($model) 
                            return $model->first_name . ' ' . $model->last_name;
                        );

                echo $form->field($assign_model, 'applicant_id')->widget(Select2::classname(), [
                    'data' => $data,
                    'attribute' => 'applicant_id',
                    'options' => ['placeholder' => 'Select an applicant'],
                    'pluginEvents' => [
                        "select2:selecting" => "function()  "
                        . "no_position = $('body').data('no_position');"
                        . "if(no_position>= " . $model->no_of_persons . ")alert('You can select only " . $model->no_of_persons . " applicant(s)');return false;  ",
                        "select2:select" => "function()  "
                        . "no_position = $('body').data('no_position');"
                        . "$('body').data('no_position',++no_position);",
                        "select2:unselect" => "function()  "
                        . "no_position = $('body').data('no_position');"
                        . "$('body').data('no_position',--no_position);",
                    ]
                ]);
                ?>
            </div>
            <div class="col-sm-6">
                <?php echo $form->field($assign_model, 'applicant_pay')->textInput(['maxlength' => true]); ?>
            </div>

            <div class="form-group" style="text-align: center;">
                <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
            </div>
        </div>
    </div>
    <?php ActiveForm::end(); ?>
</div>
<?php
$inlineScript = "$('body').data('no_position'," . count($applicant_id) . ")";
$this->registerJs($inlineScript, \yii\web\View::POS_END, 'my-inline-js');
Modal::end();

从浏览器获取的 HTML：

<div id="assignApplicantModal" class="fade modal" role="dialog">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h1>Assign Applicant</h1>
</div>
<div class="modal-body">


<div class="job-positions-form">

    <form id="w0" action="/staffing/scheduler/web/scheduler/assign_applicant" method="post">
<input type="hidden" name="_schedulerCSRF" value="eEI4TnpSZWcaFnYWNQQcKx0ndC8VEVUyDAl6LAgfBzUTKQw3EBAEEg
==">    <div class="row">
        <div class="col-sm-12">
            <div class="col-sm-6">

                <div class="form-group field-assignapplicant-applicant_id required">
<label class="control-label" for="assignapplicant-applicant_id">Applicant</label>
<div class="kv-plugin-loading loading-assignapplicant-applicant_id">&nbsp;</div><select id="assignapplicant-applicant_id"
 class="form-control" name="AssignApplicant[applicant_id]" data-s2-options="s2options_d6851687" data-krajee-select2
="select2_86691c6a" style="display:none">
<option value="">Select an applicant</option>
<option value="12">ASD</option>
<option value="13">qwe</option>
<option value="14">zxc</option>
</select>

<div class="help-block"></div>
</div>            </div>
            <div class="col-sm-6">
                <div class="form-group field-assignapplicant-applicant_pay required">
<label class="control-label" for="assignapplicant-applicant_pay">Applicant Pay</label>
<input type="text" id="assignapplicant-applicant_pay" class="form-control" name="AssignApplicant[applicant_pay
]">

<div class="help-block"></div>
</div>            </div>

            <div class="form-group" style="text-align: center;">
                <button type="submit" class="btn btn-primary">Update</button>            </div>
        </div>
    </div>
    </form></div>

</div>

</div>
</div>
</div>

【问题讨论】：

你检查过输出的 html 是什么样子的吗？

@Dekel 我已经放置了 HTML 的图像。请检查

我们不需要图片，我们需要 html。通过查看图像不可能知道 html 代码的外观:)

@Dekel 代码已经有 HTML。检查 echo $form->field($assign_model, 'applicant_id')->widget(Select2. this link generate HTML

很抱歉，$form->field($assig 是 PHP 代码，而不是 output html 再次阅读我的评论并添加最终 HTML 输出。否则真的很难提供帮助。

【参考方案1】：

当 modal 的内容是动态的时，不会加载 Select2 资源，因为最初 DOM 中没有与 Select2 相关的代码。

1)您可以通过调用提前注册Select2资产：

\kartik\select2\Select2Asset::register($this);

然后您需要在每次模态内容更改时初始化 Select2，方法是：

$('#field-id').select2();

2) 无需替换模态框内的所有 HTML，只需提前渲染它，包括空选择（或使用一些初始数据），然后仅在点击不同的模态触发器后更改其中的数据。

查看这个相关的 SO 问题：

Update select2 data without rebuilding the control select2 changing items dynamically

根据Select2 issue。

我上次使用的方式：

$dependentDropdown.find('option:not([value=""])').remove();
$dependentDropdown.select2('val', '');
// This can come from AJAX request
var data = [
    'id': 1, 'text': 'Some text 1',
    'id': 2, 'text': 'Some text 2'
],
var html = '';
$.each(data, function(key, value) 
    html += '<option value="' + value.id + '">' + value.text + '</option>';
);
$dependentDropdown.append(html);

【参考方案2】：

在 yii\bootstrap\Modal 中，tabindex="-1" 选项会阻止 Select2 搜索输入。

一个简单的解决方法是删除 tabindex 选项。

使用 JQuery： $('#id_of_the_modal').removeAttr('tabindex');

【参考方案3】：

我的问题是我在渲染我的幻想框模式窗口内容的控制器操作中使用了$this->render()，我应该使用$this->renderAjax()。现在它正确显示了选择。