Виджет \kartik\select2\Select2 при использовании renderAjax

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Закрыто
Dark Gard
Сообщения: 79
Зарегистрирован: 2016.06.06, 11:39

Виджет \kartik\select2\Select2 при использовании renderAjax

Сообщение Dark Gard »

Вопрос не к yii2, а к распространенному виджету \kartik\select2\Select2.
Возможно кто сталкивался и возможно у кого есть готовое решение/рекомендации.
Использую на странице модальное окно yii\bootstrap\Modal, содержимое которого подгружаю через ajax.
В загружаемом контенте есть Select2, в котором все работает за исключением строки поиска. При клике появляется список элементов для выбора и строка поиска которая недоступна для ввода.

Ближе к коду.
Модальное окно:

Код: Выделить всё

Modal::begin(
    [
        'options' => [
            'id'=> 'modal-import',
            'tabindex' =>false, // Эту опцию рекомендует отключать Kartik
        ],
        'header' => Html::tag('h2','').Html::hiddenInput('action',null,['id' => 'modal-action']),
        'size' => Modal::SIZE_LARGE,
    ]
);
Modal::end();
JS код для подгрузки содержимого по ajax

Код: Выделить всё

$script = <<< JS
function setModalTitle(title) {
	$("#modal-import").find("div.modal-header").find("h2").empty().append(title);
}
JS;
$this->registerJs($script, yii\web\View::POS_HEAD);

$script = <<< JS
$('#modal-import').on('show.bs.modal', function () {
    var url =  $("#modal-action").val();
    $.ajax({
        url: url,
        type: 'GET',
        beforeSend: function(){
            $("#modal-import").find("div.modal-body").html('Идет обработка данных');
        },
        success: function(data){
            $("#modal-import").find("div.modal-body").html(data);
            var newTitle = $('#modal-title').val();
            setModalTitle(newTitle);
        },
        error:  function(xhr, str){
           if (xhr.responseText) {
                $("#modal-import").find("div.modal-body").html('Возникла ошибка: ' + xhr.responseText);
                setModalTitle('Ошибка.');
            }
        }
    });
    $("#modal-import").show();
});
JS;
$this->registerJs($script);
Контролер возвращает контент через renderAjax
Вo view-файле все так же довольно стандартно.

Код: Выделить всё

...
echo Html::hiddenInput('title', $this->title, ['id' => 'modal-title']);
...
echo $form->field($model, 'list_items')->widget('\kartik\select2\Select2', [
    'data' =>$listItems,
    'pluginOptions'=>[
        'templateResult' => new JsExpression(
            "function format(state) {return state.text;}"
        ),
        'templateSelection' => new JsExpression(
            "function format(state) {return state.text;}"
        ),
        'escapeMarkup' => new JsExpression("function(m) { return m; }"),
        'allowClear' => true,
    ],
    'options' => [ 'prompt' => \Yii::$app->formatter->nullDisplay,],
]);
...
Как исправить при таком использовании проблему с поиском в Select2?
Dark Gard
Сообщения: 79
Зарегистрирован: 2016.06.06, 11:39

Re: Виджет \kartik\select2\Select2 при использовании renderAjax

Сообщение Dark Gard »

Тестирую под разные браузеры.
Проблема исключительно в tabindex для модального окна.
Представленный код работает для Chrome, но не работает под Firefox.
Подскажите плиз как быть.
serega_chem
Сообщения: 12
Зарегистрирован: 2015.07.15, 14:26
Откуда: Саранск

Re: Виджет \kartik\select2\Select2 при использовании renderAjax

Сообщение serega_chem »

Похожая проблема - если рендерить через renderPartial(), то в модальном окне не отображается виджет AttachmentsInput из расширения https://github.com/Nemmo/yii2-attachments.
Код action'a

Код: Выделить всё

    public function actionView($contactId, $count = null) {
        
        $query = Message::find()->forContact($contactId);
        $contactModel = User::findOne($contactId);
        $currentUser = Yii::$app->user->getIdentity();

        if ($count === null) {
            $count = $query->count();
        }
        $pagination = new ChatPagination([
            'defaultPageSize' => 4,
            'totalCount' => $count,
        ]);
        if ($pagination->pageCount < Yii::$app->request->get('page')) {
            throw new \yii\web\NotFoundHttpException();
        }
        $messages = $query->orderBy('id')
                ->offset($pagination->offset)
                ->limit($pagination->limit)
                ->all();
        
        Message::updateStatus($messages, $contactId);

        if (Yii::$app->request->isAjax && Yii::$app->request->get('page') !== null) {
            return $this->renderPartial('chatajax', [
                        'messages' => $messages
            ]);
        } elseif (Yii::$app->request->isAjax) {
            return $this->renderPartial('chat', [
                        'messages' => $messages,
                        'pagination' => $pagination,
                        'contactModel' => $contactModel,
                        'currentUser' => $currentUser,
                        'model' => new Message()
            ]);
        }
        
        return $this->render('chat', [
                        'messages' => $messages,
                        'pagination' => $pagination,
                        'contactModel' => $contactModel,
                        'currentUser' => $currentUser,
                        'model' => new Message()
            ]);
    }
и представления

Код: Выделить всё

<?php

use yii\helpers\Html;
use kartik\form\ActiveForm;
use yii\bootstrap\Modal;
use nemmo\attachments\components\AttachmentsInput;

/* @var $this yii\web\View */
?>
<div class="box">
    <h4 class="contact box-header" data-contact-id =<?= $contactModel->id ?>
        data-count = <?= $pagination->totalCount ?>>Диалог с <?= $contactModel->username ?></h4>
    <hr>
    <div class="box-content">
        <?php if ($pagination->pageSize < $pagination->totalCount): ?>
            <div id="showMore" class="form-group">
                <button type="button" class="btn btn-default btn-block">Показать ещё</button>
            </div>
        <?php endif; ?>
        <div id="messageList">
            <?php foreach ($messages as $message): ?>

                <?php
                $options = [
                    'class' => 'message',
                    'data-id' => $message->id
                ];
                ?>

                <?= Html::beginTag('div', $options) ?>

                <?= Html::img('/avatar/small/' . $message->from->avatarName, ['class' => 'img-circle avatar']) ?>

                <div class="message-body">
                    <div class="message-info text-muted">
                        <span class="username"><?= $message->from->username ?></span>
                        <span class="date pull-right"><?= Yii::$app->formatter->asDate($message->created_at, 'php: G:i, j F Y') ?></span>
                    </div>

                    <hr>

                    <div class="message-text">
                        <?= $message->message ?>
                    </div>

                    <div class="message-trash" title="Удалить сообщение">
                        <span class="glyphicon glyphicon-trash"></span>
                    </div>

                </div>

                <?= Html::endTag('div') ?>


            <?php endforeach; ?>
        </div>


        <?php
        $form = ActiveForm::begin([
                    'action' => ['send'],
                    'method' => 'post'
        ]);
        ?>

        <?= $form->field($model, 'message')->textarea(['rows' => 2]) ?>

        <?= $form->field($model, 'whom_id')->label(false)->hiddenInput(['value' => $contactModel->id]) ?>

        <?= Html::submitButton('Отправить', ['class' => 'btn btn-primary send']) ?>

        <?php ActiveForm::end(); ?>
        
        <div class="form-group">
        <?php
        Modal::begin([
            'header' => '<h2>Отправка файла(ов)</h2>',
            'toggleButton' => [
                'label' => 'Отправить файл(ы)',
                'tag' => 'button',
                'class' => 'btn btn-success',
            ],
            'options' => [
                'tabindex' => true,
            ],
        ]);
        ?>

        <?php
        $fileForm = ActiveForm::begin([
                    'id' => 'send-file-form',
                    'action' => ['send'],
        ]);
        ?>
        <?= $fileForm->field($model, 'message')->label(false)->hiddenInput(['value' => 'Файл(ы)']); ?>
        <?= $fileForm->field($model, 'whom_id')->label(false)->hiddenInput(['value' => $contactModel->id]) ?>
        <?=
        AttachmentsInput::widget([
            'id' => 'file-input', // Optional
            'model' => $model,
            'options' => [// Options of the Kartik's FileInput widget
                'multiple' => true, // If you want to allow multiple upload, default to false
            ],
            'pluginOptions' => [// Plugin options of the Kartik's FileInput widget 
                'maxFileCount' => 10, // Client max files
                'overwriteInitial' => true,
                'showPreview' => true,
            ]
        ])
        ?>
        <?= Html::submitButton('Отправить', ['class' => 'btn btn-primary']) ?>

        <?php ActiveForm::end(); ?>
        <?php Modal::end(); ?>
        </div>
    </div>

</div>
Буду рад любому совету. А то даже не знаю в какую сторону копать)
Аватара пользователя
Alexum
Сообщения: 683
Зарегистрирован: 2016.09.26, 10:00

Re: Виджет \kartik\select2\Select2 при использовании renderAjax

Сообщение Alexum »

renderPartial() не подтягивает JS для виджета, используйте renderAjax().
serega_chem
Сообщения: 12
Зарегистрирован: 2015.07.15, 14:26
Откуда: Саранск

Re: Виджет \kartik\select2\Select2 при использовании renderAjax

Сообщение serega_chem »

Alexum писал(а): 2018.05.07, 12:26 renderPartial() не подтягивает JS для виджета, используйте renderAjax().
Теперь ясно. Благодарю за совет!
serega_chem
Сообщения: 12
Зарегистрирован: 2015.07.15, 14:26
Откуда: Саранск

Re: Виджет \kartik\select2\Select2 при использовании renderAjax

Сообщение serega_chem »

Alexum писал(а): 2018.05.07, 12:26 renderPartial() не подтягивает JS для виджета, используйте renderAjax().
Помогло, но только в случае если actionView изначально запрашивается GET'ом.
Если через GET обратиться к другому экшену, а потом аяксом к actionView, то модальное окно не открывается.
Сделал отдельный виджет для модального окна, теперь проблем нет)
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: Виджет \kartik\select2\Select2 при использовании renderAjax

Сообщение andku83 »

Код: Выделить всё

if (Yii::$app->request->isAjax) {
    return $this->renderAjax(...);
}

return $this->render(...)
Alex_N
Сообщения: 68
Зарегистрирован: 2015.03.02, 21:20

Re: Виджет \kartik\select2\Select2 при использовании renderAjax

Сообщение Alex_N »

Dark Gard писал(а): 2017.12.05, 13:18 Тестирую под разные браузеры.
Проблема исключительно в tabindex для модального окна.
Представленный код работает для Chrome, но не работает под Firefox.
Подскажите плиз как быть.
Привет, удалось победить? У меня сейчас аналогичная проблема! Люди, помогите!
Спасибо.
Dark Gard
Сообщения: 79
Зарегистрирован: 2016.06.06, 11:39

Re: Виджет \kartik\select2\Select2 при использовании renderAjax

Сообщение Dark Gard »

Alex_N писал(а): 2019.04.28, 10:07
Dark Gard писал(а): 2017.12.05, 13:18 Тестирую под разные браузеры.
Проблема исключительно в tabindex для модального окна.
Представленный код работает для Chrome, но не работает под Firefox.
Подскажите плиз как быть.
Привет, удалось победить? У меня сейчас аналогичная проблема! Люди, помогите!
Спасибо.
Давно заходил.
Возможно уже не нужно....
Как писал опция 'tabindex' =>false лечит, но только для Хром. Для фаер фокса победить не удалось(
Alex_N
Сообщения: 68
Зарегистрирован: 2015.03.02, 21:20

Re: Виджет \kartik\select2\Select2 при использовании renderAjax

Сообщение Alex_N »

Dark Gard писал(а): 2019.06.13, 01:21
Alex_N писал(а): 2019.04.28, 10:07
Dark Gard писал(а): 2017.12.05, 13:18 Тестирую под разные браузеры.
Проблема исключительно в tabindex для модального окна.
Представленный код работает для Chrome, но не работает под Firefox.
Подскажите плиз как быть.
Привет, удалось победить? У меня сейчас аналогичная проблема! Люди, помогите!
Спасибо.
Давно заходил.
Возможно уже не нужно....
Как писал опция 'tabindex' =>false лечит, но только для Хром. Для фаер фокса победить не удалось(
А для фаер фокса кто нибудь нашел решение?
ung0vernab1e
Сообщения: 1
Зарегистрирован: 2019.12.26, 20:42

Re: Виджет \kartik\select2\Select2 при использовании renderAjax

Сообщение ung0vernab1e »

Код: Выделить всё

$.fn.modal.Constructor.prototype.enforceFocus = function() {};
Dark Gard
Сообщения: 79
Зарегистрирован: 2016.06.06, 11:39

Re: Виджет \kartik\select2\Select2 при использовании renderAjax

Сообщение Dark Gard »

ung0vernab1e писал(а): 2019.12.26, 20:44

Код: Выделить всё

$.fn.modal.Constructor.prototype.enforceFocus = function() {};
Оно!!!
Спасибо!
Закрыто