X
X
xskif2015-05-30 15:17:17
JavaScript
xskif, 2015-05-30 15:17:17

Yii2. How does pjax (or is it just AJAX) work with data-pjax="0" and data-method and data-confirm?

I can not understand how PJAX / AJAX manages to work when it is disabled on the delete button in the standard GridView. I rewrote the controller action as follows:

public function actionDelete($id, $productId = null)
    {
        $this->findModel($id)->delete();

        list($searchModel, $dataProvider) = $this->prepareDataProvider($productId);

        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
        ]);
    }


You can ignore $productId, this is the implementation of nested resources and all resources at the same time, if there is no parameter in the request, this is not the issue.

On the page I have a tabular form in a regular grid, which is wrapped in a Pjax container, the delete link looks like this:
<a href="/catalog/1/variation/3/delete" title="Удалить" data-confirm="Вы действительно хотите удалить данную запись?" data-method="post" data-pjax="0"><span class="glyphicon glyphicon-trash"></span></a>


After I rewrote the action of the controller, which, instead of a redirect, now simply renders the result, not even through renderAjax, but simply render, the delete links began to work through ajax.
I click delete - confirmation pops up, I confirm, there is a request to the server, and then the grid is simply updated.

I studied yii.js and how it handles the data-method, so a form is simply created there, inserted at the very bottom of the html document and this form submit is triggered. No pjaxes, moreover, the request to the server goes without specifying the pjax container, as is the case with pjax.reload.

Interesting fact:
The required headers are present in the delete request parameters, but where do they come from with this setup?
X-PJAX:true
X-PJAX-Container:#variationsListPjax
X-Requested-With:XMLHttpRequest


Please explain why? I’m glad that everything turned out so simply, but I can’t find where the roots grow from.

PS On one page I have several pjax containers, but none of them, when declared, catches all forms, only those with [data-pjax]

Answer the question

In order to leave comments, you need to log in

1 answer(s)
X
xskif, 2015-05-30
@xskif

I think I figured it out myself =)
It's all about the presence of a tabular form, which just has data-pjax. The algorithm turns out like this.
The link/button, when processing the data-method, looks for the nearest form, if it finds it, it applies all actions to it, if it does not find it, it creates a new form.
Changes the action and method for the given form to those set accordingly.
Well, then everything is simple. Thanks chrome debugger.
As a result, in order to achieve AJAX behavior for data-method and data-confirm, you need to wrap such a link in a form with data-pjax set. A perversion of course, but so far the developers have not done anything better.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question