pjax непонятный редирект при фильтрации в GridView

[GHopper]

Приветствую.

Имею некоторую форму, на которой вывожу GridView с данными из другой модели. Нужен поиск без перезагрузки, поэтому обернул это GridView в Pjax::begin() и Pjax::end().

По итогу получил заполненный грид, если кликать на заголовки то все сортируется без перезагрузки. Но вот если в фильтре столбца ввести поисковую фразу и нажать Tab, то вся форма субмитится.

DevTool показывает, что после потери фокуса броузер сразу отправляется на index.php?r=book%2Fupdate&id=51 с последующим редиректом на index.php?r=book%2Fview&id=51

И не понятно как отлаживать...
Что посоветуете? Куда копать? Сфокусироваться на js? Или нужна какая-то специальная конфигурация $dataProvider`а для работы с pjax?

[urichalex]

Показывайте код

[GHopper]

Странное дело, если вынести GridView из тега form, то все работает корректно. Странное поведение. По сути этот грид внутри формы мне и не нужен, но не очень удобно потом нижеидующие контроллеры к форме добавлять.

Пользуясь случаем задам еще один вопрос: как видно изкода, я сколхозил скрипты, которые добавляют скрытые input с заголовком в форму при выборе элементов в GridView (сырая версия, не обрабатываются привяки сам на себя или множественная привязка одного и того-же элемента, но пока не до этого). Меня вот все терзает вопрос - неужели нет уже готового контроллера для подобного выбора данных? Ведь задача тривиальная...

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

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use common\models\Category;
use common\models\Brand;
use yii\grid\GridView;

/* @var $this yii\web\View */
/* @var $model common\models\Item */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="item-form">

    <?php $form = ActiveForm::begin(); ?>

    <?php
    echo $form->field($model, 'brand_id')
        ->dropDownList(
            ArrayHelper::map(
                Brand::find()->all(),
                'id',
                'name'
            ),
            ['prompt'=>'Select brand']
        );
    ?>

    <?php
    echo $form->field($model, 'category_id')
        ->dropDownList(
            ArrayHelper::map(
                Category::find()->orderBy(['lft' => SORT_ASC])->all(),
                'id',
                'title'
            ),
            ['prompt'=>'Select category']
        );
    ?>

    <?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>

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

    <?= $form->field($model, 'formImageFiles[]')->fileInput([
        'multiple' => true,
        'accept' => 'image/*'
    ]) ?>

    <?= Html::beginTag('p', ['id' => 'imgPreview']) ?>
        <?php if ($images = $model->images): ?>
            <?php foreach ($images as $image): ?>
                <?= Html::img("{$model->uploadUrl}/{$image->name}", [
                    'alt' => $image->alt,
                    'width' => '200px'
                ]); ?>
            <?php endforeach; ?>
        <?php else: ?>
            <i>Images aren't uploaded yet</i>
        <?php endif; ?>
    <?= Html::endTag('p') ?>
    <h2>Relations</h2>

    <?= Html::beginTag('div', ['id' => 'relations']) ?>

        <?php foreach($model->relations as $relation): ?>
            <?= Html::beginTag('p') ?>
                <?= Html::activeHiddenInput($model, 'formRelations[]', [
                    'value' => $relation->r2,
                    'label' => ''
                ]) ?>
                <?= $relation->itemName ?>
                <?= Html::a(
                '<span class="glyphicon glyphicon-remove"></span>',
                null,
                    [
                        'title' => 'Remove',
                        'data-pjax' => '0',
                        'onclick' => "$(this).closest('p').remove(); return false;"
                    ]
                ) ?>
            <?= Html::endTag('p') ?>
        <?php endforeach; ?>

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

    <?php \yii\widgets\Pjax::begin(['id' => 'unique_id']); ?>
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            [
                'attribute' => 'brandName',
                'value' => 'brand.name'
            ],
            [
                'attribute' => 'categoryTitle',
                'value' => 'category.title'
            ],
            'name',

            [
                'class' => 'yii\grid\ActionColumn',
                'template' => '{add}',
                'buttons' => [
                    'add' => function ($url, $model) {
                        return Html::a(
                            '<span class="glyphicon glyphicon-plus"></span>',
                            '',
                            [
                                'title' => 'Add',
                                'data-pjax' => '0',
                                'onclick' => "js:addRelation({$model->id}, '{$model->name}'); return false;"
                            ]
                        );
                    },
                ],
            ],
        ],
    ]); ?>
    <?php \yii\widgets\Pjax::end(); ?>

    <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

<?php
$this->registerJs(<<<EOT
    function addRelation(id, name) {
        var html = '<p>'
            + '<input type="hidden" id="item-formrelations" name="Item[formRelations][]" value="' + id + '" label="">'
            + name 
            + ' <a title="Remove" data-pjax="0" onclick="$(this).closest(\'p\').remove(); return false;">'
            + '<span class="glyphicon glyphicon-remove"></span>'
            + '</a>'
            + '</p>';
        $('#relations').after(html);
    };

    function updatePreview(inputFile) {
        if (inputFile.files && inputFile.files.length) {
            $('#imgPreview').html('');
            for (var i = 0; i < inputFile.files.length; i++) {
                (function(file, pos) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var img = $('<img />', {
                            src: e.target.result,
                            width: '200px'
                        });
                        img.appendTo($('#imgPreview'));
                        var input = $('<input />', {
                            type: 'text',
                            name: 'Item[imageFileNames][' + pos + ']',
                            value: file.name.substring(0, file.name.lastIndexOf(".")),
                        });
                        img.appendTo($('#imgPreview'));                     
                        $('<br />').appendTo($('#imgPreview'));
                        input.appendTo($('#imgPreview'));
                        $('<br />').appendTo($('#imgPreview'));
                        $('<br />').appendTo($('#imgPreview'));
                    }
                    reader.readAsDataURL(inputFile.files[i]);
                })(inputFile.files[i], i);
            }
        }
    };
EOT
    , \yii\web\View::POS_HEAD
);

$this->registerJs(<<<EOT
    $(document).ready(function() {
        $('input[type=file][name="Item[formImageFiles][]"]').change(function() {
            updatePreview(this);
        });
    });
EOT
);
?>

[urichalex]

Для чего у вас грид в форме?
Пиджак видит вашу форму и использует ее. Укажите для пиджака 'formSelector' => false

[GHopper]

Для чего у вас грид в форме?
Пиджак видит вашу форму и использует ее. Укажите для пиджака 'formSelector' => false

В общем-то грид в форме не нужен, но чтобы его из нее убрать, придется разбивать тег form или потом нижеследующие контроллеры явно привязывать к форме. Что чуть менее удобно, чем просто бросить грид посреди формы.

С флагом 'formSelector' => false ничего не поменялось, кроме того, что при поиске страница скроллится в топ. Без этого флага скрол не двигается, что мне нравится гораздо больше.

[GHopper]

Ну и, собственно, возникший вопрос - как правильно исключить грид из формы, сохранив его положение в форме (т.е. после одно из контроллеров формы и до кнопки субмит). Как это сделать на голом HTML я понимаю, а как в ActiveForm?