S
S
Silverviql2018-09-18 15:12:15
Yii
Silverviql, 2018-09-18 15:12:15

How to display select2 in modal window?

I used kartik-v Select2 widget inside bootstrap modal loaded via ajax,

<?php echo Select2::widget([
                'name' => 'state_40',
                'data' => [1 => "Футболка", 2 => "Пролонгация", 3 => "Полк", 4 => "Футон", 5 => "Профуфлили"],
                'options' => ['placeholder' => 'Select a state ...'],
                'pluginOptions' => [
                    'allowClear' => true
                ],
            ]);
            ?>

Calling a modal window
if($model->isNewRecord){
    $js = <<<JS
    $('#modalZakazcreate').on('beforeSubmit', 'form', function(){
        alert('Напоминание создано!');
   var data = $(this).serialize();
   $.ajax({
      url: '/frontend/web/zakaz/create/$model->id_zakaz', 
      type: 'POST',
      data: data,
      success: function(res){
         /*console.log(res);*/
         console.log('Четко');
      },
      error: function(){
         alert('Error!');
      }
   });
  /* $('.trigger success-trigger').trigger('click');*/
   $('#modalZakazcreate').modal('hide'); //закрытие модального окна.
   $('#modalZakazcreate'). removeAttr ('tabindex');
   $('#modalZakazcreate').off('beforeSubmit', form);
   return false;
     });
JS;
    $this->registerJs($js);
}

On another page where the modal window is called, I registered
<?php Modal::begin([
        'id' => 'modalZakazupdate',
        'options' => [
            'id' => 'kartik-modal',
            'tabindex' => false // important for Select2 to work properly
        ],
        'header' => '<h2>Редактирование заказа</h2>'
    ]);
    echo '<div class="modalContent"></div>';
    Modal::end(); ?>

If you write 'id' => 'kartik-modal' in the option, then the modal window does not open at all, there are no errors.
If you remove the select2 input field, it is displayed behind the modal window.
5ba0eb077df00289300013.png
If you open a page with input fields, then of course there are input fields) 5ba0eb42ee84e622774970.png
I found a mention of this problem on github. https://github.com/yiisoft/yii2-bootstrap/issues/70
I fixed it by removing the attribute in JavaScript:
$ ( ' #modal ' ). removeAttr('tabindex');
But that didn't help either.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question