Published 04 Aug, 2022

Jquery - Issue with Bootstrap Modal and Select2 in Yii

Category Jquery
Modified : Nov 11, 2022
33

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

There are 1 suggested solutions here and each one has been listed below with a detailed description. The following topics have been covered briefly such as Jquery, Php, Twitter Bootstrap, Yii. These have been categorized in sections for a clear and precise explanation.

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

You should try running select2 after modal has been visible.

Thorough information.