I am attempting to use history.pushState() to change the browser URL as a user scrolls through a list of movies. I am using django-endless-pagination with its Twitter-style pagination.
What I would like to do is, as the user continually scrolls up or down the current list of movies, the URL would change. Say the user scrolls down to page 9, the URL gets updated to /?page=9. But if the user scrolls back up to page 2, the URL should get updated to /?page=2.
The result is, if the user clicks on a link and then hits the back button they are brought back to the last 'page' they were on.
This works going forward with django-endless-pagination, but I want it to work in reverse if the user scrolls back up the page. I think that jquery-waypoints is the answer to my problem.
I have this generated as the pages are loaded via Ajax:
<li style="display: none">
<div id="waypoint1" class="waypoint" data-request-path="/movie/?page=1"></div>
</li>
Each one of these gets a unique id and has a class of waypoint. The data-request-path is the current 'page' path.
I have attempted to use:
$(".waypoint").waypoint(function() {
history.pushState({scrollTop:document.body.scrollTop},document.title,$(this.element).attr("data-request-path"));
});
Which works the first time we pass a waypoint, but doesn't work when passing the additional waypoints. These additional waypoints don't exist in the document until additional results are pulled via Ajax as the user scrolls.
What do I need to do to get the waypoints to cause a URL change as they are scrolled to and displayed on the page?
