Yii 中的 Bootstrap Modal 和 Select2 问题

Question

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

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

我正在进行一个项目，我的客户要求我准备应用程序以便能够使用可编辑网格。出于这个原因，我包括了引导程序和 x-editable 扩展。为了在网格中创建新记录，我使用了一个按钮，该按钮调用了一个模式窗口，在该窗口中呈现我的控制器/创建操作，我在其中使用 eselect2 下拉菜单。

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

我了解到这是 bootstarp 和 select2 的现有问题，并且有一些解决方法，但我无法让它们都不起作用。

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

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

请在此处找到我的代码：

在我的管理视图中生成按钮以创建新项目：

<?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'),
    ),
)); ?>

在我的管理视图中生成模式

<?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 视图：

<?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(); ?>

解决方案：

在你迷失在下面的 cmets 之前，我在这里复制解决方案。

在我的情况下，问题是我的一些 javascripts 与其他脚本纠缠在一起，这就是为什么 select2 没有正确加载的原因。

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

感谢 agriboz 帮助我找出问题所在！

Answer 1

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

您应该在模态显示后尝试运行select2。

Thorough information.