Mar 16, 2019
0
Level 5
I Have Problems Implementing Infinite-Scroll Functionality
Hello, with https://infinite-scroll.com/ plugin in my laravel 5.7 / Bootstrap v4.1. / blade / jquery-3.3.1 / Infinite Scroll PACKAGED v3.0.5 application I implemented infinite-scroll functionality It works, but not fully. The problem is that when I scroll more pages than I have rows pagination still continues working and I got invalid rows loaded label.
Please look live https://www.votes.nilov-sergey-demo-apps.tk/all-external-news at top left of the page there is number of items loaded, buit moving bottom I got invalid message like
540 of 121 External News loaded
and no end of the page:
My base template has :
@extends($frontend_template_name.'.layouts.frontend')
@section('content')
@inject('viewFuncs', 'App\library\viewFuncs')
<h1 class="text-center">
@if(isset($site_heading))<span>{{ $site_heading }}@endif</span>
<br> {{ $all_external_news_count }} News
</h1>
@include($frontend_template_name.'.layouts.logged_user')
<div class="row ml-2 mb-3">
{{ Breadcrumbs::render('all-external-news', 'External News') }}
</div>
<div class="row ml-2 mb-3 small_title">
<span id="span_external_news_loaded_count">{{ $external_news_loaded_count }}</span> of {{ $all_external_news_count }} External News loaded
</div>
<div class="row ml-1 mr-1">
<div class="col-sm-8 ">
<div class="row">
<div id="infinite_scroll_container">
@foreach($allExternalNews as $nextAllExternalNews)
<article class="all-external-news-listing-append-block">
<div class="card">
<div class="card-body pt-2">
<h5 class="card-title mb-0 pb-0">
<a href="{{ route('news', $nextAllExternalNews['slug'] ) }}">
{{ Purifier::clean($nextAllExternalNews['title']) }}
</a>
@if( $nextAllExternalNews['is_featured'] )
<span class="float-right mt-0 pt-0 badge badge-pill badge-primary">Featured</span>
@endif
</h5>
@if( !empty($nextAllExternalNews['content_shortly']) )
<div class="card-footer mt-0 pt-0 mb-0 pb-0">
<small>{!! Purifier::clean($nextAllExternalNews['content_shortly']) !!}</small>
</div>
@endif
<div class="card-footer mt-0 pt-0">
<div class="row float-right mt-0 pt-0 published_by_author">
Published at {{ $viewFuncs->getFormattedDateTime($nextAllExternalNews['created_at'], 'mysql', 'ago_format') }} by {{
$nextAllExternalNews['source_type'] }}
</div>
</div>
</div>
</div>
</article>
@endforeach
</div>
<div class="all-external-news-listing-load-status-block">
END OF CONTENT
<div class="loader-ellips infinite-scroll-request">
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
</div>
<p class="infinite-scroll-last">End of content</p>
<p class="infinite-scroll-error">No more pages to load</p>
</div>
</div>
</div>
@include($frontend_template_name.'.layouts.right_menu_block' , ['show_questions_block' => false, 'show_most_rated_quizzes_block' => true,
'show_most_taggable_votes_block' => true, 'show_Vote_categories_block'=> true ] )
</div>
@endsection
@section('scripts')
<script src="{{ asset('js/infinite-scroll.pkgd.min.js') }}{{ "?dt=".time() }}"></script>
<script src="{{ asset('js/'.$frontend_template_name.'/all_external_news.js') }}{{ "?dt=".time() }}"></script>
<script>
/*<![CDATA[*/
var frontendAllExternalNews = new frontendAllExternalNews('view', // must be called before jQuery(document).ready(function ($) {
<?php echo $appParamsForJSArray ?>
);
jQuery(document).ready(function ($) {
frontendAllExternalNews.onFrontendPageInit('view')
});
/*]]>*/
</script>
@endsection
so when page is opened first 20 rows are already shown
Moving down new data are uploaded with template :
@inject('viewFuncs', 'App\library\viewFuncs')
@if( !empty($latestExternalNewsData) and count($latestExternalNewsData) > 0 )
<div class="latest-news-block mt-0 mb-0 mt-3 bordered">
<h3 class="text-center">Our Partners News</h3>
<ul class="news-line">
@foreach($latestExternalNewsData as $nextExternalLatestNew)
<div class="card">
<div class="card-body pt-0">
<h5 class="card-title mb-0 pb-0">
<a href="{{ $nextExternalLatestNew['source_url'] }}">
{!! Purifier::clean($nextExternalLatestNew['title']) !!}
</a>
@if( $nextExternalLatestNew['is_featured'] )
<span class="float-right mt-0 pt-0 badge badge-pill badge-primary">Featured</span>
@endif
</h5>
@if( !empty($nextExternalLatestNew['content_shortly']) )
<p class=" m-0 pt-0 ">
<small>
{!! Purifier::clean($nextExternalLatestNew['content_shortly']) !!}
</small>
</p>
@endif
<div class="card-footer mt-0 pt-0">
<div class="row float-right mt-0 pt-0 published_by_author">
Published at {{ $viewFuncs->getFormattedDateTime($nextExternalLatestNew['created_at'], 'mysql', 'ago_format') }} by <b> {{
$nextExternalLatestNew['source_type'] }}</b>
</div>
</div>
</div>
</div>
@endforeach
</ul>
@if( $all_external_news_count > count($latestExternalNewsData) )
<div class="card">
<div class="card-body pt-0">
<a href="{{ route('all-external-news' ) }}">
Our Partners All News
</a>
</div>
</div>
@endif
</div>
@else
@if( !empty($config['show_no_items_label']) )
<div class="alert alert-warning small" role="alert">
There are no Our Partners news yet
</div>
@endif
@endif
and javascript file with infinity imnitialization :
var this_frontend_home_url
var this_infinite_scroll_rows_per_scroll_step
var this_csrf_token
function frontendAllExternalNews(page, paramsArray) { // constructor of frontend AllExternalNews's editor - set all params from server
// alert( "paramsArray page::"+var_dump(paramsArray) )
this_frontend_home_url = paramsArray.frontend_home_url;
this_infinite_scroll_rows_per_scroll_step = paramsArray.infinite_scroll_rows_per_scroll_step;
this_csrf_token = paramsArray.csrf_token;
if (page == "view") {
this.InitInfiniteScroll()
}
} // function frontendAllExternalNews(Params) { constructor of frontend AllExternalNews's editor - set all params from server
frontendAllExternalNews.prototype.InitInfiniteScroll = function () {
var infScroll = new InfiniteScroll('#infinite_scroll_container', {
path: function () {
console.log(" path this.loadCount::")
console.log( this.loadCount )
console.log("this.loadCount * this_infinite_scroll_rows_per_scroll_step::")
console.log( this.loadCount * this_infinite_scroll_rows_per_scroll_step )
if ( this.loadCount > 0 ) {
$("#span_external_news_loaded_count").html(this.loadCount * this_infinite_scroll_rows_per_scroll_step)
}
return '/get-all-external-news-listing/' + ( ( this.loadCount + 1 ) * this_infinite_scroll_rows_per_scroll_step );
},
append: '.all-external-news-listing-append-block',
status: '.all-external-news-listing-load-status-block',
}
, function (data) {
}
)
}
frontendAllExternalNews.prototype.onFrontendPageInit = function (page) { // all vars/objects init
frontendInit()
} // frontendAllExternalNews.prototype.onFrontendPageInit= function(page) {
I have defined status block but it does not work. Why? Can it be the reason?
- Scrolling down I see that my url is changed to https://www.votes.nilov-sergey-demo-apps.tk/get-all-external-news-listing/20 I suppose that is not valid, but I do not see why?
Thanks!
Please or to participate in this conversation.