Level 28
I think you simply forgot to render the paginator using {!! $articles->render() !!}, that's why jScroll can't find the correct link to get data from and tries to acces /undefined
Aug 27, 2015
26
Level 55
Larval and jScroll
When scrolling to the bottom of the page an error is thrown.
"Failed to load resource: the server responded with a status of 404 (Not Found). mydomain.com/undefined"
I am using jScroll, the pagination links are hidden but the content from the next page isn't loaded.
ArticlesController controller
public function index()
{
$articles = Article::latest('published_at')->simplePaginate(4);
return view('articles.index', compact('articles'));
}
index.blade.php view
<div class="scroller">
@foreach ( $articles as $article )
<div class="row">
<article class="item">
<div class="article-background-pattern"
style='background-image: {{ $article->header_image_path }}'></div>
<div class="card">
<div class="card-block">
<h3 class="article-title">{{ $article->title }}</h3>
<div class="article-body">
<p class="text-justify">{{ $article->body }}</p>
</div>
</div>
<p class="card-text card-footer text-right">
<small class="text-muted"><i
class="fa fa-fw fa-clock-o"></i> {{ $article->published_at->diffForHumans() }}
</small>
</p>
</div>
</article>
</div>
@endforeach
<div class="row">
{!! $articles->render() !!}
</div>
</div>
...
<script src="/js/jquery.jscroll.min.js"></script>
<script>
$(document).ready(function(){
$('ul.pager:visible:first').hide();
$('div.scroller').jscroll({
debug: true,
autoTrigger: true,
nextSelector: 'li a[rel="next"]',
contentSelector: 'div.scroller',
callback: function() {
$('ul.pager:visible:first').hide();
}
});
});
</script>
jScroll can be downloaded from here
Level 55
They are there (I just didn't include them above), and jScroll does find them and hides them, but the content isn't loaded.
Level 8
Can u show me your network tab and how server respond because I have already faced that kind of error when loading from server via ajax.
Level 55
Level 8
nextSelector ('a:last') - The selector to use for finding the link which contains the href pointing to the next set of content.
Its documentation show that it only select a element that contains href. And you are selecting element that doesn't contain a element .
<li class="active"><span>1</span></li>
Level 55
@veve286 Thanks, but that still produces the same error.
Level 8
You should use simplePagination and u should select next element. I don't understand why u select current page button to load another page data.
<li><a href="post?page=2" rel="next">»</a></li>
Level 55
I have changed it to simplePaginate(4). How do I target the next anchor tag? I have tried a[rel=next] but that doesn't work.
Level 8
jQuery('a[rel="next"]');
Level 55
I still get the same error. I don't think it is an issue with calling the second page.
Level 8
Then what is your request url ? Can u show me plz :)
Level 55
There isn't a request URL, just the base URL. Nothing else is called.
Level 8
http://stackoverflow.com/questions/7228250/jquery-requests-undefined-url-used-with-phpdevshell
see here bro. Your problem is happened because of returning null value from javascript variable.
Level 28
It is called but it's calling the string "undefined" so it can't get the correct URL. And since you don't have a route "undefined" in your Laravel it throws the 404.
What does your paginator HTML look like currently?
Level 55
<ul class="pager">
<li>
<a href="http://michaelnorris.dev/?page=2" rel="prev">«</a></li>
<li><a href="http://michaelnorris.dev/?page=4" rel="next">»</a>
</li>
</ul>
Level 28
Is it possible that the selector li a[rel="next"] returns more than one result so jQuery can't get the href (because of the nested li elements)?
You could try either li > a[rel="next"] or li a[rel="next"]:first to change that.
Level 55
@ftiersch unfortunately neither of those changes work. I still get the same "Failed to load resource: the server responded with a status of 404 (Not Found)"
Level 8
You should try manually creating element pagination link without using {{ $articles->render( ) }}.
Level 55
Level 28
Unfortunately not but I think the error has to be somewhere in jScroll - not necessarily a bug but just in the selector. You could try debugging it in jquery.jscroll.js in line 44 - does that line return an actual element from the first() method?
Level 8
Change ur selector to .row .pager li a[rel="next"]; If it still doesn't work . Give an id to wrapper of the $articles->render After that select like this #id .pager li ...... Like this. I foud that nextSelector is relative to its scroll container. Hope it will work.
Level 55
@veve286 would you mind putting that into context of my code. I'm a little lost now. I have followed your suggestion and still get the same error.
Level 8
nextSelector : '.row .pager li a[rel="next"]' Hiw about this ? Or nextSelector : '#customId .pager li a[rel="next"]'
Level 55
Same issue :(
Thanks for all your help :)
Level 8
Ur problem is when selecting element. Dont wrap ur a element within li or div element and make sure only one a element in ur container and test it. If it still doesn't work i have no idea . Good luck dude :D
Level 1
For those who are still finding solution to this thread.
render your links inside wrapper div. i.e. in this case inside div.scroller.
<div class="scroller">
@foreach ( $articles as $article )
......
@endforeach
{{ $articles->links() }}
</div>
Please or to participate in this conversation.