php - Yii 中 Bootstrap Modal 和 Select2 的问题

Question

我也在 Yii 开发者论坛上发布了这个问题，但到目前为止没有得到任何回复，所以我认为值得尝试在这里发布安静。

在阅读了几篇帖子和博客文章后，我仍然在为这个问题苦苦挣扎。

我正在进行一个项目，我的客户要求我准备应用程序以便能够使用可编辑网格。因此，我添加了 bootstrap 和 x-editable 扩展。为了在网格中创建新记录，我使用一个按钮来调用一个模态窗口，在其中渲染我的 Controller /创建操作，我在其中使用 eselect2 下拉列表。

当我从浏览器调用 Controller /创建操作时，它工作正常并生成所有 eselect2 下拉菜单，但是当我将其渲染到 Bootstrap 模式窗口时，它会生成简单的 html 选择。

我读到这是 bootstarp 和 select2 的现有问题，并且有一些解决方法，但我根本无法让它们工作。

我在生成的 HTML 中认识到，当 View 呈现到模式窗口中时，eselect2 脚本不会包含在 HTML header 中。我手动将 eselect2 脚本添加到标题中，但它没有解决我的问题。

有人可以帮我解决这个问题吗？

请在此处找到我的代码:

在我的管理 View 中生成按钮以创建新项目:

<?php $this->widget('bootstrap.widgets.TbButton', array(
    'label'=>'Új cikk rögzítése',
    'type'=>'primary', // null, 'primary', 'info', 'success', 'warning', 'danger' or 'inverse'
    'size'=>'normal', // null, 'large', 'small' or 'mini'
    'htmlOptions'=>array(
        'data-toggle'=>'modal',
        'data-target'=>'#myModal',
        'href'=>$this->createUrl('cikk/create'),
    ),
)); ?>

在我的管理 View 中生成模式

<?php $this->beginWidget('bootstrap.widgets.TbModal', array(
                'id'=>'myModal',
                'options' => array(
                                'backdrop' => 'static',
                                'keyboard' => true),
        )); ?>

<div class="modal-header">
    <a class="close" data-dismiss="modal">&times;</a>
    <h4>Új cikk rögzítése</h4>
</div>

<div class="modal-body">
    <?php //echo $this->renderPartial('_form', array('model'=>$model),false, true); ?>
</div>

<div class="modal-footer">
    <?php $this->widget('bootstrap.widgets.TbButton', array(
        'type'=>'primary',
        'label'=>'Adatok rögzítése',
        'url'=>'',
        'htmlOptions'=>array('onclick' => '$("#cikk-form").submit()'),
    )); ?>
    <?php $this->widget('bootstrap.widgets.TbButton', array(
        'label'=>'Mégsem',
        'url'=>'#',
        'htmlOptions'=>array('data-dismiss'=>'modal'),
    )); ?>
</div>

<?php $this->endWidget(); ?>

<script type="text/javascript">
$("a[data-toggle=modal]").click(function(){
    var target = $(this).attr('data-target');
    var url = $(this).attr('href');
    if(url){
        $(target).find(".modal-body").load(url);
    }});

$(function(){$("#myModal").draggable().resizable();});

</script>

渲染到模式窗口中的我的 _form View :

<?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
        'id'=>'cikk-form',
        'type'=>'horizontal',
        // Please note: When you enable ajax validation, make sure the corresponding
        // controller action is handling ajax validation correctly.
        // There is a call to performAjaxValidation() commented in generated controller code.
        // See class documentation of CActiveForm for details on this.
        'enableAjaxValidation'=>false,
)); ?>

        <p class="note">A <span class="required">*</span> -al jelölt mezők kitöltése kötelező.</p>

        <?php echo $form->errorSummary($model); ?>
<fieldset>
        <?php echo $form->textFieldRow($model, 'megnevezes', array('class'=>'span3')); ?>

        <?php echo $form->labelEx($model,'mertekegyseg'); ?>
        <?php $this->widget('ext.select2.ESelect2', array(
                'model' => $model,
                'attribute' => 'mertekegyseg',
                'data' => Mertekegyseg::model()->getMertekegysegOptions(),
                   'htmlOptions'=>array('empty' => 'Válasszon mértékegységet!')
              ));?>
        <?php echo $form->error($model,'mertekegyseg'); ?>

</fieldset>
<?php $this->endWidget(); ?>

解决方案:

在您迷失在下面的评论之前，我将解决方案复制到此处。

就我而言，问题是我的一些 javascript 与其他脚本纠缠在一起，这就是 select2 未正确加载的原因。

我在我的 _form View 中应用了 Yii::app()->clientscript->scriptMap['*.js'] = false; ，这解决了我的问题。

感谢 agriboz 帮助我找到了问题!

Answer 1

$('#myModal').on('shown.bs.modal', function (e) {
  $('selector').select2();
})

您应该在模式可见后尝试运行 select2。

Thorough information.