I’ve created a quick pagination on a single.php file in order to use infinite scroll in a loop at the bottom of the page. Here’s the code I used to create my ‘nextSelector’ and ‘navSelector’ for the infinite scroll:
<?php
$next_url = $_SERVER['REQUEST_URI'].'2';
?>
<ul class="single-pagination">
<li><a class="next pagination-item" href="<?php echo $next_url; ?>/">Next</a></li>
</ul><!--single-pagination-->
This works fine because it creates the ‘next ‘ page to get the infinite scroll started. My navSelector
in the infinite scroll is ul.single-pagination
and my nextSelector
is a.next.pagination-item
. This all works fine on most pages but when I visit a page that has a number at the end of the URL, the infinite scroll changes the number instead of changing the appended number on the URL. For example, if I had a URL like this:
http://www.example.com/this-post-2/
It would load the first iteration of the infinite scroll successfully, which would be:
http://www.example.com/this-post-2/2/
and then on the next iteration would throw a 404 error on this URL:
http://www.example.com/this-post-3/2/
Though it should be looking for:
http://www.example.com/this-post-2/3/
Short of breaking apart the JS code for the infinite scroll, is there any way to customize the URL that the infinite scroll look for?
EDIT
This is related to the RegEx expression in the jquery.infinitescroll.min.js that is altering the URL. Here is the code that I am working on altering. I will post the answer here if no one beats me to it:
t = t.match(/^(.*?)b2b(.*?$)/).slice(1);
The solution to this lies in the jquery.infinitescroll.js (or jquery.infinitescroll.min.js file). The RegEx that the author used on this does not take into account these types of URLs.
I created a fork of the code in my GitHub account that can be accessed here:
https://github.com/MillerMedia/infinite-scroll
Basically, a RegEx expression of this:
Is placed before this one: