nirvana-msu / yii2-infinite-scroll Goto Github PK

I need to load next set of data while scroll from another controller action. How can i change call back url. Please help me.

I was wondering can this be integrated with jquery masonry so that when more items are loaded the masonry is reapplied.

I know jquery masonry has append but not sure how i'd integrate it so that it's triggered when the new items are loaded.

Thanks any direction is appreciated.

Recently was released version 3 of https://github.com/metafizzy/infinite-scroll, but this extension is incompatible with it. For reference
https://github.com/metafizzy/infinite-scroll/releases/tag/v3.0.0
https://infinite-scroll.com/extras.html#upgrading-from-v2
So now after installing through composer extension will not work.
I suggest

• restrict version of infinite-scroll in current master and release version 1 of yii2-infinite-scroll;
• update code of yii2-infinite-scroll to work with version 3 of infinite-scroll and release version 2 of yii2-infinite-scroll.

As result there will be yii2-infinite-scroll version 1 for legacy projects and yii2-infinite-scroll version 2 for future.

Hello,

Do you have anything planned for such a feature?

Something like replicating the Facebook Messages system. Basically, instead of triggering the event on scrolling down, it would trigger it on scrolling up.

Thanks

Uncaught ReferenceError: afterAjaxListViewUpdate is not defined at index:998

I get the following error in console:

Uncaught ReferenceError: afterAjaxListViewUpdate is not defined    

This is what gets outputted as source:

<script type="text/javascript">$('#my-listview-id .items').infinitescroll({"loading":{"msgText":"   <em>Loading next set of items...</em>","finishedMsg":"<em>No more items to load</em>","img":"/assets/3b698b34/ajax-loader.gif"},"behavior":"twitter","maxPage":3,"contentSelector":"#my-listview-id .items","itemSelector":"#my-listview-id .items >","navSelector":"#my-listview-id ul.pagination","nextSelector":"#my-listview-id ul.pagination li.next a:first"}, afterAjaxListViewUpdate);</script>

Below is my configuration:

<?php

echo ListView::widget([
    'dataProvider' => $dataProvider,
    'id' => 'my-listview-id',
    'layout' => "{summary}\n<div class=\"items\">{items}</div>\n{pager}",
    'itemView' => '_index',
    'itemOptions' => ['class' => 'item col-sm-4 col-md-3'],
    'pager' => [
        'class' => InfiniteScrollPager::className(),
        'widgetId' => 'my-listview-id',
        'itemsCssClass' => 'items',
        'contentLoadedCallback' => 'afterAjaxListViewUpdate',
        'nextPageLabel' => 'Load more items',
        'linkOptions' => [
        'class' => 'btn btn-lg btn-block',
        ],
           'pluginOptions' => [
            'loading' => [
                'msgText' => "<em>Loading next set of items...</em>",
                'finishedMsg' => "<em>No more items to load</em>",
            ],
            'behavior' => InfiniteScrollPager::BEHAVIOR_MASONRY,
        ],
    ],
]);

?>

Hello! I got this error after appending new items. How can I fix it?
$(...).masonry is not a function at HTMLDivElement.infscr_callback_masonry (masonry-isotope.js?v=1515518008:18) at opts.callback (jquery.infinitescroll.js?v=1515518008:179) at infscr_loadcallback [as _loadcallback] (jquery.infinitescroll.js?v=1515518008:403) at HTMLDivElement.infscr_ajax_callback (jquery.infinitescroll.js?v=1515518008:575) at HTMLDivElement.<anonymous> (jquery.js?v=1513603849:9872) at Function.each (jquery.js?v=1513603849:362) at jQuery.fn.init.each (jquery.js?v=1513603849:157) at Object.<anonymous> (jquery.js?v=1513603849:9871) at fire (jquery.js?v=1513603849:3317) at Object.fireWith [as resolveWith] (jquery.js?v=1513603849:3447)``

I installed your plugin but I get error;
Class 'InfiniteScrollPager' not found
please can you explain more about using the extension

Is there an on loaded event? I need it to re-declare a javascript function after it finished loading

Hi! How about merge this pull request? #8

Package cannot be installed via composer, seems like dependency bower-asset/jquery-infinite-scroll no longer exists

After my pjax call. infinite pagination call two times and display double result. means
for example http://mysite.com/frontend/web/site/index?page=2&per-page=2 call two times in console and render one page result two times. :(
please help!
Here is my code!

<?php $pjax = Pjax::begin(); ?>
<div class="well pr_box">
    <?= Html::beginForm(['site/index'], 'post', ['data-pjax' => '', 'class' => 'form-horizontal']); ?>
    <h4>What's New</h4>

    <div class="form-group" style="padding:14px;">

        <?= Html::textarea('status_update', '', ['class' => 'form-control']) ?>
    </div>
    <ul class="list-inline">

        <li><a href=""> <i class="fa fa-picture-o"></i></a></li>

        <?= Html::submitButton('Submit', ['class' => 'btn btn-success right-side']) ?>
    </ul>

    <?= Html::endForm() ?>
</div>
<?php echo ListView::widget([
    'id' => 'my-listview-id',
    'layout' => "{summary}\n<div class=\"items\">{items}</div>\n{pager}",
    'options' => [
        'tag' => 'div',
    ],
    'dataProvider' => $listDataProvider,
    'itemView' => function ($model, $key, $index, $widget) {
        $itemContent = $this->render('_list_item', ['model' => $model]);
        /* Display an Advertisement after the first list item */
        return $itemContent;
        /* Or if you just want to display the list item only: */
    },
    'itemOptions' => [
        'tag' => false, 'class' => 'item',
    ],
    'summary' => '',

    /* do not display {summary} */
    // 'layout' => '{items}{pager}',
    'pager' => [
        'class' => InfiniteScrollPager::className(),
        'widgetId' => 'my-listview-id',
        'itemsCssClass' => 'items',
        //'pjaxContainer' => $pjax->id,
        //  'contentLoadedCallback' => 'afterAjaxListViewUpdate',
        'nextPageLabel' => 'Load more',
        // 'linkOptions' => [
        //     'class' => 'btn btn-lg btn-block text-center',
        // ],
        'pluginOptions' => [
            'loading' => [
                //'msgText' => "<p class='text-center'>Loading next set of items...</p>",
                'finishedMsg' => "<p class='text-center'>No more items to load</p>",
                //'img' => 'http://google.com',
            ],
            //  'behavior' => InfiniteScrollPager::BEHAVIOR_TWITTER,
        ],
    ],
]); ?>
<?php Pjax::end(); ?>`

I have a listview using this extension inside a div container. It can load the next set of items if I use browser's vertical scrollbar, but not with div container's scrollbar. Does it only reacts to browser's scrollbar?

I write in view file

On page, I don't see options loadOnScroll
Because in file InfiniteScrollPager.php line 245
$pluginOptions = array_filter($this->pluginOptions);
filtering my settings

Hi there,
Great work on the plugin, thinking about trying to help out getting this to work with infinite scroll 3.0. I'm using all the right libs for now (v2), and trying to get the errorCallback function to work when results finished (done):
'pluginOptions' => [
...,
'errorCallback' => 'function () { console.log("done");}'
]

However, I'm getting this javascript console error on 'done' event:
TypeError: opts.errorCallback.call is not a function

Any ideas?

Finally, I'd also like for the "Load more" button to not show on the final items displayed. The functionality now is on the last page of items to load, the "Load more" buttons is displayed. Only when this button is clicked, and loading image appears (but no more records retrieved because there is no more), does the 'finishedMsg' appear.

I'm basically trying to display a message at the end of all items loading that says "done" and doesn't fade away, doesn't require clicking "load more" to display this.

Thanks!
Tony

Can you give me an example when using \yii\data\Pagination?

My code:
Controller action:

  function actionIndex()
  {
      $query = Article::find()->where(['status' => 1]);
      $countQuery = clone $query;
      $pages = new Pagination(['totalCount' => $countQuery->count()]);
      $models = $query->offset($pages->offset)
          ->limit($pages->limit)
          ->all();

      return $this->render('index', [
           'models' => $models,
           'pages' => $pages,
      ]);
  }

in the View:

<div class="post-all">
  <?php foreach ($models as $model) {
      // display $model here
  } ?>
</div>

  // display pagination
<?= InfiniteScrollPager::widget([
      'pagination' => $pages,
     'itemsCssClass' => 'post-all',
  ]);
?>

But it appears an error：Uncaught SyntaxError: Unexpected token )

can i using Infinite-scroll without gridview or listview? give me an example please.