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
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
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)