Yii2 Pjax reloads entire page

Question

Is there someone who can help me with the following? I use a modal/form to edit a model onscreen, and update the model via Pjax. Saving is no problem, but now the gridview must be updated with Pjax as well.

For my modal I use the following code

<?php 
$form = ActiveForm::begin(
    ['enableClientValidation' => true, 'options' => ['id' => $model->formName()]]);
?>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title"><?= $actionTitle ?> <?= StringHelper::basename(get_class($model)); ?></h4>
</div>
<div class="modal-body">
    ...
</div>
<div class="modal-footer">
    <?php echo Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

<?php ActiveForm::end();

$this->registerJs(<<<JS
$(document).on('hidden.bs.modal', function (e) {
        $(e.target).removeData('bs.modal');
    });
JS
);

?>

<?php $script = <<< JS

$('form#{$model->formName()}').on('beforeSubmit', function(e){
    var \$form = $(this);
    $.post(
        \$form.attr("action"), //Serialize Yii2 Form
        \$form.serialize()
    ).done(function(result){
        if(result == true){
            $(\$form).trigger("reset");
            $(document).find('#modalphysicalcomponent').modal('hide');
            $.pjax.defaults.timeout = false;
            $.pjax.reload({container:'#Grid'});
        }else{
            $("#message").html(result.message);
        }
    }).fail(function(){
        console.log("server error");
    });

    return false;

});

JS;
$this->registerJs($script);
?>

It should update only the following gridview, but instead reloads the entire page which results in an error as certain POST variables are not resend.

<?php Pjax::begin(['id' => 'Grid']); ?>
        <?= GridView::widget([
            'dataProvider' => $dataProvider,
            'columns' => [
                ['class' => 'yii\grid\SerialColumn'],
                'id',
                'component.tag',
                'component.name',
                'component.parent.tag',
                [
                    'label' => 'Configure',
                    'format'=>'raw',
                    'value' => function ($model, $key, $index, $column){
                        return Html::a('Configure '.get_class($model), ['update-modal', 'id' => $model->component->id], ['data-toggle'=>'modal', 'data-target'=>'#modalphysicalcomponent' ,'class' => 'btn btn-xs btn-primary', ]);
                    }
                ],
            ],
        ]); ?>
<?php Pjax::end(); ?>

I use the same modal on a different page, and it seems to work fine there, but I can't spot any differences between the two view pages.

Anyone who can help?

Answer 1

You need to pass the grid id as text, and not object when reloading the gridview. The object is passed as the second parameter which are the options.

This is your mistake

$.pjax.reload({container:'#Grid'});`

it should be like below

$.pjax.reload('#Grid');

See the docs for the Pjax here