I’m trying to use a ListView with pjax but the page reloads, I don’t understand quite well how to use it
any help or tutorials is appreciated, thanks
My code
Controller
public function actionIndex()
{
...
$provider = new ActiveDataProvider([
'query' => EventsDates::find()->future()->joinWith([
'event' => function ($query) {
$query->approved()->orderBy(['views' => SORT_DESC]);
}]),
'pagination' => [
'pageSize' => 21,
],
]);
return $this->render('index', [
'provider' => $provider
]);
}
View
<?php Pjax::begin(); ?>
<?=
ListView::widget([
'dataProvider' => $provider,
'itemView' => '/event/_event',
'itemOptions' => [
'tag' => false
]
]);?>
<?php Pjax::end(); ?>
Generated HTML
...
<div id="w1"> <div id="w2" class="list-view"><div class="summary">A exibir <b>43-63</b> de <b>2 203</b> itens.</div>
<div class="col-xs-4">
<div class="thumbnail" style="height: 370px;">
<div class="row">
<div class="col-md-8">
<a href="/event/index/7873"><img src="/images/events/small/1903-1401804095-Workshops-de-Danca-(2).JPG" alt="EDSAE | CURSOS DE VERÃO | Intensivos de Dança e Livre Transito de Aulas a Solo"></a>
</div>
<div class="col-md-4 event-date">
<div class="event-weekday">qua </div>
<div class="event-day">06 </div>
<div class="event-month">Ago </div>
</div>
</div>
<div class="caption">
<h3>
<a href="/event/index/7873">EDSAE | CURSOS DE VERÃO | Intensivos de Dança e Livre Transito de Aulas a Solo</a>
</h3>
<i class="fa fa-map-marker fa-fw"></i>
<a href="/venue/index/1159" class="simple">EDSAE - Escola de Dança e Teatro Musical</a><br>
<i class="fa fa-location-arrow fa-fw"></i> <a href="/city/index/154" class="simple">Lisboa</a><br>
<i class="fa fa-tag fa-fw"></i>
<a class="simple" href="/category/index/24">Workshop</a>
</div>
</div>
</div>
...
<div class="col-xs-4">
<div class="thumbnail" style="height: 370px;">
<div class="row">
<div class="col-md-8">
<a href="/event/index/7730"><img src="/images/events/small/1-1400773862-MeetingPoint.png" alt="Meeting Point"></a>
</div>
<div class="col-md-4 event-date">
<div class="event-weekday">qui </div>
<div class="event-day">07 </div>
<div class="event-month">Ago </div>
</div>
</div>
<div class="caption">
<h3>
<a href="/event/index/7730">Meeting Point</a>
</h3>
<i class="fa fa-map-marker fa-fw"></i>
<a href="/venue/index/278" class="simple">Fundação Calouste Gulbenkian</a><br>
<i class="fa fa-location-arrow fa-fw"></i> <a href="/city/index/154" class="simple">Lisboa</a><br>
<i class="fa fa-tag fa-fw"></i>
<a class="simple" href="/category/index/26">Exposição</a>
</div>
</div>
</div>
<ul class="pagination"><li class="prev"><a href="/site/index?page=2&per-page=21" data-page="1">«</a></li>
<li><a href="/site/index?page=1&per-page=21" data-page="0">1</a></li>
<li><a href="/site/index?page=2&per-page=21" data-page="1">2</a></li>
<li class="active"><a href="/site/index?page=3&per-page=21" data-page="2">3</a></li>
<li><a href="/site/index?page=4&per-page=21" data-page="3">4</a></li>
<li><a href="/site/index?page=5&per-page=21" data-page="4">5</a></li>
<li><a href="/site/index?page=6&per-page=21" data-page="5">6</a></li>
<li><a href="/site/index?page=7&per-page=21" data-page="6">7</a></li>
<li><a href="/site/index?page=8&per-page=21" data-page="7">8</a></li>
<li><a href="/site/index?page=9&per-page=21" data-page="8">9</a></li>
<li><a href="/site/index?page=10&per-page=21" data-page="9">10</a></li>
<li class="next"><a href="/site/index?page=4&per-page=21" data-page="3">»</a></li></ul></div> </div>
...
and the generated JS script
...
jQuery(document).pjax("#w1 a", "#w1", {"push":true,"replace":false,"timeout":1000,"scrollTo":false});
jQuery(document).on('submit', "#w1 form[data-pjax]", function (event) {jQuery.pjax.submit(event, '#w1', {"push":true,"replace":false,"timeout":1000,"scrollTo":false});});
...