I used yii 2.0. I displayed the list using data provider. For this i integrate the infinite scroll pagination.
Below is my code:
echo yii\widgets\ListView::widget([
'id' => 'my-listview-id',
'dataProvider' => $listDataProvider,
'itemView' =>'_item_view',
'pager' => [
'class' => nirvana\infinitescroll\InfiniteScrollPager::className(),
'widgetId' => 'my-listview-id',
'itemsCssClass' => 'test',
]
]);
Here the first 10 records displayed fine. Then the "Load More" button is displayed. But nothing is loaded. The infinite scroll is not working.
while viewing the source code the following script is displayed at the footer.
<script type="text/javascript">$('#my-listview-id .test').infinitescroll({"maxPage":5,"contentSelector":"#my-listview-id .test","itemSelector":"#my-listview-id .test >","navSelector":"#my-listview-id ul.pagination","nextSelector":"#my-listview-id ul.pagination li.next a:first","loading":{"img":"/fancytemple_blog/assets/a7b78b36/ajax-loader.gif"}}, ,);</script>
In console the script error shown is Uncaught SyntaxError: Unexpected token ,
Anybody will help to fix this. Thanks
Your code looks fine but I checked your generated javascript against mine and it's different, I think because I've used more plugin options. So that could be a possible solution.
<?=
ListView::widget([
'id' => 'feed',
'dataProvider' => $dataProvider,
'layout' => "{summary}
<div class=\"items\">{items}</div>
{pager}",
'itemView' => '_itemview',
'summary' => '',
'emptyText' => $emptyText,
'pager' =>
['class' =>
irvana\infinitescroll\InfiniteScrollPager::className(),
'widgetId' => 'feed',
'itemsCssClass' => 'items',
//'contentLoadedCallback' => 'function(id, data) {$("time.timeago").timeago();}',
'pluginOptions' => [
'loading' => [
'msgText' => "<center><img src='/loading.gif'></center>",
'img' => "/1x1-pixel.png",
'finishedMsg' => $emptyText,
],
//'behavior' =>
irvana\infinitescroll\InfiniteScrollPager::BEHAVIOR_TWITTER,
],
]
]);
?>
If adding the extra options doesn't work then try making sure you're running the latest version and try using it on a page with nothing else there to make sure there's nothing messing with. Hope this helps.
Another idea is to make sure pagination is set in your dataprovider, take the infinite scroll out and make sure pagination is ok, if it works then you know it's an issue with the infinite scroll and not something else.
$dataProvider = new ActiveDataProvider([
'query' => $query,
'pagination' => ['pageSize' => '10']]);
Your issue was due to the bug where contentLoadedCallback was null by default and you also did not override it through the configuration. It has been fixed in this commit. Just do composer update and it should work fine.