Infinite scroll – problém s offsetem

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
AdamVyborny
Člen | 36
+
0
-

Zdravím, snažím se rozběhat infinite scroll, ale nějak se mi špatně posílá offset ajaxem. Při prvním doscrollování se appendne dalších 20, ale při každém dalším se appenduje furt dokola těch dalších dvacet. Když si dumpnu $offset v handlu vrací stále nulu, ale když se kouknu do kódu tak v ajaxu posílám při druhé doscrollování 20.

basePresenter.php

<?php
namespace App\Presenters;

use App\Model;
use Nette;

/**
 * Base presenter for all application presenters.
 */
abstract class BasePresenter extends Nette\Application\UI\Presenter
{
	private $offset = 0;
	protected function beforeRender()
    {
		$this->notif_arr = $this->notifications->getNotifications($this->user->getIdentity()->getId())->limit(20)->offset($this->offset)->fetchAll();
	}

	/**
     * @param $offset
     */
    public function handleLoadMoreNotifications($offset) {
        $this->offset = $offset + 20;
        $this->template->offset = $this->offset;
        \Tracy\Debugger::barDump($this->offset);
        $this->redrawControl('notifContainer');
        $this->redrawControl('infiniteScroll');
    }
}

@layout.latte

<div class="col-xs-12 nopadding" style="overflow-y: scroll; max-height: 300px; font-size: 11px" id="infiniteScroll">
	<div class="list-group">
		<div class="wsFeedback" data-id="{$user->getIdentity()->id}" data-schema="{$user->getIdentity()->schema}" style="height: 100%;" data-ajax-append="true" n:snippet="notifContainer">
			{foreach $notifications AS $key => $notification}
				<a n:href="markAsRead!, idNotification => $notification->id_notification, url => $notification->url" title="zobrazit" n:class="$notification->viewdate ? 'notif_viewed list-group-item':'notif_unviewed list-group-item'">
                	{$notification->content|noescape}
                </a>
            {/foreach}
         </div>
         <div id="loader" class="text-center" style="width: 100%; margin-top: 5px; display: none;">
         </div>
	</div>
</div>

.
.
.

{snippet infiniteScroll}
    <script>
        jQuery(function ($) {
            $('#infiniteScroll').on('scroll', function () {
                if ($(window).data('ajaxready') == false) return;
                if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                    $(window).data('ajaxready', false);
                    $.nette.ajax({
                        cache: false,
                        beforeSend: function () {
                            $('#loader').show();
                        },
                        complete: function () {
                            $('#loader').hide();
                        },
                        off: ['loading'],
                        url: {link loadMoreNotifications!},
                        data: {
                            'offset': {ifset $offset}{$offset}{else}0{/ifset}
                        },
                        success: function () {
                            $(window).data('ajaxready', true);
                        }
                    });
                }
            })
        });
    </script>
{/snippet}

Editoval AdamVyborny (23. 6. 2017 14:03)

AdamVyborny
Člen | 36
+
+2
-

Vyřešeno – jen jeden snippet a offset si beru z ID posledního odkazu…

basePresenter.php

<?php
namespace App\Presenters;

use App\Model;
use Nette;

/**
 * Base presenter for all application presenters.
 */
abstract class BasePresenter extends Nette\Application\UI\Presenter
{
	private $offset = 0;
	protected function beforeRender()
    {
		$this->notif_arr = $this->notifications->getNotifications($this->user->getIdentity()->getId())->limit(20)->offset($this->offset)->fetchAll();
        $this->template->offset = $this->offset;
	}

	/**
     * @param $offset
     */
    public function handleLoadMoreNotifications($offset) {
        $this->offset = $offset;
        \Tracy\Debugger::barDump($this->offset);
        $this->redrawControl('notifContainer');
    }
}

@layout.latte

<div class="col-xs-12 nopadding" style="overflow-y: scroll; max-height: 300px; font-size: 11px" id="infiniteScroll">
	<div class="list-group">
		<div class="wsFeedback" data-id="{$user->getIdentity()->id}" data-schema="{$user->getIdentity()->schema}" style="height: 100%;" data-ajax-append="true" n:snippet="notifContainer">
			{foreach $notifications AS $key => $notification}
				<a id="{$key+1+$offset}" n:href="markAsRead!, idNotification => $notification->id_notification, url => $notification->url" title="zobrazit" n:class="$notification->viewdate ? 'notif_viewed list-group-item':'notif_unviewed list-group-item'">
                	{$notification->content|noescape}
                </a>
            {/foreach}
         </div>
         <div id="loader" class="text-center" style="width: 100%; margin-top: 5px; display: none;">
         </div>
	</div>
</div>

.
.
.

<script>
    jQuery(function ($) {
        $('#infiniteScroll').on('scroll', function () {
            var $parent = $(this);
            if ($(window).data('ajaxready') == false) return;
            if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                $(window).data('ajaxready', false);
                $.nette.ajax({
                    cache: false,
                    beforeSend: function () {
                        $('#loader').show();
                    },
                    complete: function () {
                        $('#loader').hide();
                    },
                    off: ['loading'],
                    url: {link loadMoreNotifications!},
                    data: {
                        'offset': $parent.find('a').last().data('id')
                    },
                    success: function () {
                        $(window).data('ajaxready', true);
                    }
                });
            }
        })
    });
</script>

Editoval AdamVyborny (23. 8. 2017 15:48)