Как отобразить select2 в модальном окне?

Question

[Silverviql]

Я использовал kartik-v Select2 виджет внутри загрузочного модального файла, загруженного через ajax,

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

Вызов модального окна

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);
}

На другой странице где вызывается модальное окно прописал

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

Если в option прописать 'id' => 'kartik-modal', то модальное окно вообще не открыываетсЯ, никаких ошибок нет.
Если убрать то поле ввода select2 отображается за модальным окном

Если открывать страницу с полями ввода то поля ввода понятное дело есть)

На гитхаб нашел упоминание данной проблемы. https://github.com/yiisoft/yii2-bootstrap/issues/70
Я прописал ,удалив атрибут в JavaScript:

$ ( ' #modal ' ). removeAttr ( ' tabindex ' );
Но это так же не помогло.

Comments

[Дмитрий]

Добрый день.

Я использовал kartik-v Select2 виджет внутри загрузочного модального файла, загруженного через ajax,

Как Вы загружаете через ajax?
Вот так писать не надо, это бред сивой кобылы в лунную ночь!
'/frontend/web/zakaz/create/$model->id_zakaz',

[Максим Тимофеев]

да проблема есть, как-то провел пол дня в поисках решения и нашел. Спустя некоторое время пробовал повторить - не помогло. Видимо версии bs.
Мой совет: не юзать модалку и kartik-v Select2 одновременно. Юзайте с модалкой голый https://select2.org (последнюю версию)

[Дмитрий]

Вызов модального окна

и

На другой странице где вызывается модальное окно прописал

не совсем понятно. Где Вы вызываете модальное окно? Где находится первый код, а где второй.
Если код модального окна и код вызова разместить в одно файле, то всё работает. Модальное окно появляется, несмотря на то, есть "id" => "kartik-modal" или нет и Select2 остаётся в окне.

[Дмитрий]

Максим Тимофеев, от kartik modal думаю можно тоже отказаться)))

[Максим Тимофеев]

slo_nik, отношение к виджетам от kartik меняется в процессе освоения yii и php:
- отлично все из коробки
- как это совместить с чем-то еще?
- нахрена все это надо если можно просто js подключить
- проще свой виджет написать за 15 минут под этот js и пользоваться без этой кучи зависимостей
Если юзать только его виджеты и не выходить за их функционал - супер решения. Но чаще отказываюсь полностью.

[Silverviql]

Максим Тимофеев, Прописал вот так )

<?= // Tagging support Single
            $form->field($model, 'description')->widget(Select2::classname(),[
                'name' => 'color_3',
                'value' => $model->description,
                'data' =>$data,
                'options' => ['placeholder' => 'Select a color ...'],
                'pluginOptions' => [
                    'tags' => true,
                    'tokenSeparators' => [',', ' '],
                    'maximumInputLength' => 10
                ],
            ])->label(false) ?>

и теперь работает ) \
Только я нечаянно обновил виджет изобращений и он поплыл, над будет переделать, но не сутЬ)

[Silverviql]

Максим Тимофеев, Пока надо быстро использую его решения, как появляется время или упираюсь в ограниченность функционала переделываю )

[Silverviql]

slo_nik,

Вот так писать не надо, это бред сивой кобылы в лунную ночь!
'/frontend/web/zakaz/create/$model->id_zakaz',

А как надо подскажите.

[Дмитрий]

Максим Тимофеев, тоже возникла подобная мысль, буквально на днях. FileInput - куча документации, а толку мало)))

[Дмитрий]

Silverviql, использовать Url::to() или Url::toRoute().

[Silverviql]

slo_nik,
Я передалал

$.ajax({
	    url: '/frontend/web/zakaz/create/$model->id_zakaz',

На

$.ajax({
url:  Url::to(['zakaz/create', 'id' => $model->id_zakaz]),

так вообще не работает_)
Выдает

Uncaught SyntaxError: Unexpected token :

[Дмитрий]

Silverviql, Вы бы в консоли браузера посмотрели, как выглядит ссылка и исправили бы...
Естественно не будет работать.
В своём коде Вы передаёте путь к действию в кавычках

url: '/frontend/web/zakaz/create/$model->id_zakaz',

Так почему Вы решили, что если использовать Url::to() нужно без кавычек?
Вообще-то, лично я, такой синтаксис не приветствую)))
Делаю немного по-другому.

$this->registerJs("
$('#modalZakazcreate').on('beforeSubmit', 'form', function(){
   var data = $(this).serialize();
   $.ajax({
      url: '" . Url::to(['zakaz/create']) . "', 
      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;
     });
", View::POS_END);

И не обязательно передавать id заказа через get параметр. Добавьте скрытое поле в форму.

[Дмитрий]

Silverviql, и ещё, Вы используете модальное окно от kartik? А зачем?
В официальных расширениях есть модальное окно. Думаю, что это будет лучше.