Difference between #1 and #3 of
How to use GridView with AJAX

Changes

Title unchanged

How to use GridView with AJAX

Category unchanged

How-tos

Yii version changed

2.0

Tags changed

widget,yii2, pjax, widget

Content changed

With the adoption of <a title="jquery-pjax" href="https://github.com/yiisoft/jquery-pjax" target="_blank">PJax</a> on Yii2 things  have change quite a bit with GridView when it comes to work with them in AJAX mode. It will probably be confusing at the beginning, but then you will soon realize how powerful the new approach is. <h2>
 
Using PJax widget</h2>
 
The way to work with GridView in AJAX mode, is by using the PJax widget. The basic usage is like the following:
```php

<?php \yii\widgets\Pjax::begin(); ?>
<?= GridView::widget([
[...]
Thats it, from now, the links and forms (filtering) on your GridView widget will work on ajax mode. But wait a minute, how come the action buttons do not work on AJAX mode? Well, if you check closely the rendered HTML, you will see that the links do have the HTML5 attribute <code>data-pjax="0"</code>. That means that if you don't wish PJax to handle your links, you need to add this HTML5 attribute to them.
<h2>
 
How to Update my GridView</h2>
 
You will surely missing <code>$('#grid').yiiGridView('update')</code> and wondering how to do it with <code>PJax</code>. The following code comes to the rescue: ~~~
 
[
```javascript] // on your javascript // I highly recommend that you setup the id of your PJax widget $.pjax.reload({container:'#idofyourpjaxwidget'}); ~~~``` For more information about the options that you can pass to the <code>reload</code> function, please check the <a href="https://github.com/yiisoft/jquery-pjax/blob/master/jquery.pjax.js#L131">PJax plugin code</a>. <h2>
 
Final Notes</h2>
 
The <code>PJax</code> widget works with any links and/or forms that are inside its <code>begin()</code> and <code>closeend()</code> statements. That means, that this tutorial is also valid for <code>ListView</code>, <code>LinkPager</code>, etc... Anything that holds a link and/or a form. HappYii2 coding
10 0
15 followers
Viewed: 85 585 times
Version: 2.0
Category: How-tos
Tags: pjax, widget, yii2
Written by: Antonio Ramirez
Last updated by: CeBe
Created on: Apr 27, 2014
Last updated: 6 years ago
Update Article

Revisions

View all history