How to enable ajax update in yii2 gridview?

Question

How to enable ajax update in yii2 gridview?

Example: 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 the ajax update instead of using the GET method. How to enable this in Yii2 gridview?

Answer 1

You can use the PJax widget as shown below:

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

It is suggested to take a look at the official Yii2 : Yii 2.0: how to use GridView with AJAX p>

---

If the URL is changed using Ajax requests using PJax :

As stated in Yii2 :

Pjax uses only the content enclosed between its calls to begin () and end (), called the content of the widget body. By default, any link to a click or form submission (for these forms with the data-pjax attribute) inside the body content will trigger an AJAX request. Responding to an AJAX request, Pjax will send the client updated body content (based on the AJAX request), which will replace the old content with the new one. The browser URL will be updated using pushState . The whole process does not require reloading the layout or resources (js, css).

You can disable pushState (updating the URL using an Ajax request) as shown below:

 enablePushState => FALSE 

I mean:

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

---

How to make action buttons work with PJax

As the Yii2 official Wiki says:

if you carefully navigate the displayed HTML , you will see that the links have the HTML5 attribute data-pjax="0" . This means that if you do not want PJax process your links, you need to add this HTML5 attribute to them.

---

How to update my gridview

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