Yii2: GridView filters and Pjax are not working correctly

[alexweb]

I'm using Gridview widget with Pjax. Sorting works fine. But when I enter keyword in filter, it tries to submit another form on the page using POST and page refreshes (or the form shows validation errors) instead of sending GET (like sorting does). In other words Pjax/Gridview doesn't know which form it should submit.
I added ID to the grid but it didn't help.
The grid is loading dynamically in Modal window.
Configuration is below:

\yii\widgets\Pjax::begin();

echo \yii\grid\GridView::widget([
    'id'=>'job-gridview',
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'layout' => "{items}\n{pager}",
    'columns' => [
        'name',
        'status',
    ],
]);

\yii\widgets\Pjax::end();

[klevron]

Did you try to set an id on Pjax ? e.g. :

\yii\widgets\Pjax::begin(['id'=>'pjax-job-gridview']);

[alexweb]

Tried to set ID, but it didn't help.

[alex-code]

Have you got another form on the modal?
How are you rendering it? renderPartial or renderAjax

[alexweb]

No there are no more forms in the Modal. Just Gridview.

I render it using renderAjax

[faeron]

same here with grid view. But also sorting does not work. It is always reloading the whole page for me.
The gridview is the only widget (beside pjax) in the view. It's a normal controller render of the view.

[alexweb]

Problem should be somewere in applyFilter() method.
When I call $('#job-grid').yiiGridView('applyFilter'); this method submits another form on the page instead of refreshing the grid.
Looks like some conflicts of IDs..

[alexweb]

Highlighted line submits wrong form. Tried to console.log() the form, all is correct. But why it submits another form? Strange.. Maybe some trigger is attached?

yii.gridView.js

        applyFilter: function () {
            var $grid = $(this), event;
            var settings = gridData[$grid.prop('id')].settings;
            var data = {};
            $.each($(settings.filterSelector).serializeArray(), function () {
                data[this.name] = this.value;
            });
            $.each(yii.getQueryParams(settings.filterUrl), function (name, value) {
                if (data[name] === undefined) {
                    data[name] = value;
                }
            });

            var pos = settings.filterUrl.indexOf('?');
            var url = pos < 0 ? settings.filterUrl : settings.filterUrl.substring(0, pos);

            $grid.find('form.gridview-filter-form').remove();
            var $form = $('<form action="' + url + '" method="get" class="gridview-filter-form" style="display:none" data-pjax></form>').appendTo($grid);
            $.each(data, function (name, value) {
                $form.append($('<input type="hidden" name="t" value="" />').attr('name', name).val(value));
            });

            event = $.Event(gridEvents.beforeFilter);
            $grid.trigger(event);
            if (event.result === false) {
                return;
            }



            $form.submit();  // <= THIS LINE SUBMITS ANOTHER FORM ON THE PAGE, NOT $form 



            $grid.trigger(gridEvents.afterFilter);
        },

[alexweb]

Found the reason of the problem! It was nested forms.
I inserted my modal window initialization at the middle of another form:

Modal::begin([
    'header' => Yii::t('app', 'Select Job'),
    'id' => 'job-modal',
]);
Modal::end();

And when ajax loads a gridview and inserts it in modal, the GridView filter form appears inside of the initial form.

So a fix is to move Modal initialization outside the initial form..

[ceovishnu]

same issue here i have one form and one gridview in same form tag, But when i search from the gridview filter then it's post the whole form.
Anyone idea about same.

[alexweb]

You need to move your gridview out from the other form. For example to put it in a modal window and show on click.

[ceovishnu]

this solution is not useful for me because in my gridview also input fields which i want after the form submit.
so i should we put the gridview inside the form

[alexweb]

In that case, after filling fields in modal window form, you can insert hidden inputs to your form by js (with neccessary values from the form in modal window).

[jigneshmca1985]

@alexweb this can not be solutions. It weird solution as i am thinking because lets assume that there is only one field so you can do with js but in case there will be multiple text box in grid view than code will be weird.

I have same problem same as @ceovishnu suffers.

Well i have put the gird view in the form tag and if i do sorting that it will works good but when i do filter from the grid view filter text box than it will be redirect this seems to be not happens until press the submit button.

I have one input text box in grid view as position field. when i submit the form then i have to update the relational table with product id and its position field.

Please suggest some good solutions for this issues because in every complex application development there should be grid view inside the form tag with input text box in grid view as column.

Looking forward to have a good and simple solution.

[ceovishnu]

@jigneshmca1985 any solution of my problem?
any update

[ceovishnu]

@alexweb any update for the same

[yoyobdg]

I have a solution for this

put this code for begin ajax

Pjax::begin(['id' => 'admin-crud-id', 'timeout' => false,
'enablePushState' => false,]);

mybe can help.

[cntabana]

@yoyobdg ,thank you so much.Your solution works for me.GBU

[ctala]

@yoyobdg Solution worked for me for changing the pagination, but it did not work for me for the filter :(

[ctala]

@yoyobdg solution works perfectly :P . Timeout was messing with me.

[dynasource]

watch out with setting this timeout to false. The timeout is there for a reason. It is to ensure the page will be loaded after a timeout. If its set to false/infinite, it could lead to infinite waiting for users (who will then be better off having a page refresh)

[ctala]

Yep, I will just put a good enough loading time.

[sfalpha]

For those who encountered this problem.
Remember too...

• put <form> between Pjax::begin and GridView::widget (This prevent pjax submit wrong form).
• set _unique_ id for GridView widget, not just Pjax otherwise u may get id collision because of auto generated id.

[samsadbeagum]

For those who encountered this problem.
Remember too...

• put
  between Pjax::begin and GridView::widget (This prevent pjax submit wrong form).
• set _unique_ id for GridView widget, not just Pjax otherwise u may get id collision because of auto generated id.

Thank you.
Just adding id to GridView's options solved the issue of GridView filtering refreshing the complete page.