0 Replies - 307 Views - Last Post: 10 March 2019 - 08:58 AM

#1 Petro Gromovo   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 14-February 19

I have problems implementing infinite-scroll functionality

Posted 10 March 2019 - 08:58 AM

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.ni...l-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>&nbsp;of&nbsp;{{ $all_external_news_count }}&nbsp;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>&nbsp;{{
							$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 initialization :
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?

2) Scrolling down I see that my url is changed to https://www.votes.ni...news-listing/20
I suppose that is not valid, but I do not see why?

Thanks!

Is This A Good Question/Topic? 0
  • +

Page 1 of 1