How to enable ajax update in yii2 GridView?

Question

How to enable ajax update in yii2 GridView ?

Ex: GridView GET Method

`http://localhost/borderland/web/item/index?ItemSearch[code]=&ItemSearch[name]=&ItemSearch[price]=&ItemSearch[availability]=&ItemSearch[itemCategory_id]=2&sort=price

` I need to use ajax update instead of using GET method. How to enable that in Yii2 GridView ?

Answer 1

You can use PJax widget like below:

<?php \yii\widgets\Pjax::begin(); ?>
<?= GridView::widget([
// ... configuration here
]);
?>
<?php \yii\widgets\Pjax::end(); ?>

It is suggested to take a look at the Yii2's official wiki: Yii 2.0: How to use GridView with AJAX

---

If URL changes with Ajax requests using PJax:

As Yii2's official document says:

Pjax only deals with the content enclosed between its begin() and end() calls, called the body content of the widget. By default, any link click or form submission (for those forms with data-pjax attribute) within the body content will trigger an AJAX request. In responding to the AJAX request, Pjax will send the updated body content (based on the AJAX request) to the client which will replace the old content with the new one. The browser's URL will then be updated using pushState. The whole process requires no reloading of the layout or resources (js, css).

You can disable pushState (Updating the URL with Ajax request) like below:

enablePushState => FALSE

I mean:

\yii\widgets\Pjax::begin(
    [
        'enablePushState'=>FALSE
    ]
);

---

How to make action buttons working with PJax

As Yii2's official Wiki says:

if you check closely the rendered HTML, you will see that the links do have the HTML5 attribute data-pjax="0". That means that if you don't wish PJax to handle your links, you need to add this HTML5 attribute to them.

---

How to Update my GridView

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