Странное поведение GridView, kartik/Select2 и fancybox

Вопросы по вёрстке и JavaScript
Ответить
osolodkin
Сообщения: 1
Зарегистрирован: 2017.07.03, 12:21

Странное поведение GridView, kartik/Select2 и fancybox

Сообщение osolodkin »

Привет всем.

В процессе разработки наткнулся на странное поведение fancybox и Select2.
При установке значения у kartik/Select2, который находится внутри fancybox у меня перегружается страница.
Забегая вперед, скажу, что решение проблемы я нашел в установке того же значения через setTimeout (в коде оно закомментировано), но это не добавило понимания сути проблемы.
К слову, если тот же fancybox перетащить из фильтра грида в чистый html, то значение устанавливается нормально.
То есть какая-то сложная непонятная зависимость компонентов, которую я не могу разгадать :(
Может быть кто-то сможет подсказать почему так происходит?

Контроллер - любой, дефолтный. Не имеет значения... В моем случае такой

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

    public function actionTest()
    {
        $searchModel = new UsersSearch();
        $params = Yii::$app->request->queryParams;
        $dataProvider = $searchModel->search($params);
        return $this->render('test', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
        ]);
    }
Вьюха

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

<?php
use yii\grid\GridView;
use kartik\widgets\Select2;
?>
<style>
    .select2-dropdown {z-index:9000;}
</style>

<div class="users-index">
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            [
                'attribute'=>'address',
                'filter' => '<a class="fancybox" href="#addressSelector" onclick="return loadAddress();">нажми</a></div>
                            <div id="addressSelector" style="display:none; width:400px; height:200px;">'.
                                Select2::widget([
                                    'name' => 'testSelect2',
                                    'id' => 'testSelect2',
                                    'data' => ['test1', 'test2', 'test3'],
                                ]).
                            '</div>'
            ]
        ],
    ]); ?>
</div>

<script>
    function loadAddress(){
//        window.setTimeout(function () {
            var form = document.forms[0];
            $('#testSelect2').val(1).trigger('change');
//        }, 0);
        return false;
    }
</script>

<?php
    $this->registerCssFile("/views/users/jquery.fancybox.css");
    $this->registerJsFile("/views/users/jquery.fancybox.pack.js", ["depends" => "yii\web\JqueryAsset", "position"=>\yii\web\View::POS_END]);
    $this->registerJs('$(".fancybox").fancybox({"helpers": {"overlay": {"locked": false}}});');
?>
Ответить