Issue with Bootstrap Modal and Select2 in Yii

I have posted this question on Yii developers forum as well but didn't get any reply so far, so I thought it worth to try to post the quietsion here.

After reading several threads and blog posts I’m still struggling with this issue.

I’m in the middle of a project where my client asked me to prepare the application to be able to use editable grids. For this reason I included bootstrap and x-editable extensions. In order to create new record into the grid I use a button which calls a modal window into which I render my controller/create action, where I use eselect2 dropdowns.

When I call my controller/create action from the browser it works fine and generates all eselect2 dropdowns,however when I render it into a bootstrap modal window it generates simple html selects.

I read that thisis an existing issue with bootstarp and select2 and there are some workarounds but I couldn’t make none of them working at all.

I recognized in the generated HTML that when view is rendered into the modal window the eselect2 script is not included into the HTML header. I added eselect2 script manually to the header but it didn’t solve my issue.

Can someone helpme out on this?

Please find herewith my code:

Generate button in my admin view to create new item:

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

Generate modal in my admin 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>

My _form view that is rendered into the modal window:

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

SOLUTION:

I copy the solution here before you get lost in comments below.

In my case the problem was that some of my javascripts tangled with other scripts and that's why select2 was not loaded correctly.

I applied Yii::app()->clientscript->scriptMap['*.js'] = false; in my _form view and that was solved my problem.

Big up to agriboz for helping me track down the problem!

Answers


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

You should try running select2 after modal has been visible.

Thorough information.


Need Your Help

Display from array only once

php mysql mysqli

Im using the following code. It goes through a DB and pulls out the question and the related answers.

Comparison operators not supported for type IList when Paging data in Linq to Sql

c# asp.net-mvc linq-to-sql asp.net-mvc-2

I can understand what the error is saying - it can't compare a list. Not a problem, other than the fact that I don't know how to not have it compare a list when I want to page through a model with a