How do I use pushstate to create infinite scrolling blog effect in a standard rails app?
How do I use pushstate in a simple rails blog to create the effect that larger new sites are currently using: as you scroll to the bottom of the page, the next article seamlessly is loaded, the url is changed and a google analytics page view event is fired.
I was wondering if anyone could explain how this is accomplished, any tutorials, or if I could request this tutorial. I know this is accomplished through ajax and pushstate behavior, just not sure how to accomplish this is a standard rails app. By standard rails app I mean that my goal is to accomplish this without using a js frontend like angular. Is this possible?
For an example:
http://www.theonion.com, click on an article and begin scrolling - take note of url bar, page view, etc.
You definitely don't need a frontend framework for this, so no worries there. :)
You're looking at some functionality that's sort of like infinite scroll on an index page, but slightly different because you're scrolling through the next and previous items individual. It's kinda like you're viewing the show action and then scrolling into the next show action.
The best solution here is probably something custom. Similar to how Ryan Bates in his revised Railscasts episode builds infinite scroll from scratch, but you'll need to add a "next" and "previous" method to the model in order to grab the next record for the show action instead of the next page of results that would be on the index.
Really I think with some minor tweaks, you could take the code from his episode to pull this off. You'd basically update the JS response to do the pushstate and append to the page, and set a link to the next episode that you can use for looking up the next result (instead of using will_paginate there).
I'd definitely like to do a screencast on this, because it's something you see popping up quite often.
That looks perfect, I will look into this solution and see what I can come up with. Thanks as always for the help!