kop / yii2-scroll-pager

Infinite AJAX scrolling for Yii2 ListView widget
https://kop.github.io/yii2-scroll-pager/
MIT License
180 stars 63 forks source link

Integrate with Pjax and Activ filters ( correct "reinitialize" after Pjax reload ListView ) #47

Open pliszka opened 8 years ago

pliszka commented 8 years ago

Some code

I'm working with ListView widget with some Pjax reload feature as follow:

    <?php Pjax::end() ?>

    <?php $pjax = Pjax::begin(['id' => 'list_content']); ?>
    <?= ListView::widget([
        'dataProvider' => $dataProvider,
        'layout' => "{pager}\n{items}\n{summary}",
        'itemView' => function ($model, $key, $index, $widget) {
            return $this->render('_list_item',['model' => $model]);
        },
        'pager' => [
            'class' => \kop\y2sp\ScrollPager::className(),
            'eventOnReady' => 'function() {scrollPager = this;}',
        ],
    ]); ?>
    <?php Pjax::end(); ?>

Full code

    <script>
        var scrollPager;
    </script>
    <?php
    $this->registerJs(
        '$("document").ready(function(){
            $("#filters").on("pjax:end", function() {
                $.pjax.reload({container:"#list_content"});
            });
        });'
    );
    ?>

    <?php Pjax::begin(['id' => 'filters']); ?>
    <?php $form = ActiveForm::begin([
        'method' => 'get',
        'options' => [
            'data-pjax' => true,
        ],
    ]); ?>

    <?= $form->field($searchModel, 'author'); ?>

    <?= $form->field($searchModel, 'message'); ?>

    <div class="form-group">
        <?= Html::submitButton('Apply', ['class' => 'btn btn-success']) ?>
    </div>
    <?php ActiveForm::end(); ?>
    <?php Pjax::end() ?>

    <?php $pjax = Pjax::begin(['id' => 'list_content']); ?>
    <?= ListView::widget([
        'dataProvider' => $dataProvider,
        'layout' => "{pager}\n{items}\n{summary}",
        'itemView' => function ($model, $key, $index, $widget) {
            return $this->render('_list_item',['model' => $model]);
        },
        'pager' => [
            'class' => \kop\y2sp\ScrollPager::className(),
            'eventOnReady' => 'function() {scrollPager = this;}',
        ],
    ]); ?>
    <?php Pjax::end(); ?>

Steps to reproduce this problem

scrollPager.reinitialize();

or

scrollPager.next();

or

$(window).scroll();

each ends with exactly same way.

Actual result

The link "Load more items" is showing correctly but it's not working.

Expected result

I could click "Load more items" and get the next "package" of items via Ajax.

Please help.

fbarrento commented 8 years ago

The same

thompalstra commented 8 years ago

Has there been any solution to this issue?

stenleegunz commented 7 years ago

Hello, u can use scrollPager.reinitialize(); before pjax success http://stackoverflow.com/questions/21679655/jquery-pjax-ajax-success-function