Topic: Loading pages via AJAX with jquery
What I'm trying to accomplish is the loading of page content via interaction with various links but ALSO have the page state remain if the page is refreshed.
So I have a page. I click a link that executes some jquery that retrieves content from the server and updates a div on the page. Works fine. However, if the user refreshes the page, the content goes back to what it was.
So the solution I came up with was to have an action.html.erb AND an action.js.erb that do virtually the exact same thing. So when a user clicks a jquery link to replace the div, the div is replaced using the action.js.erb code, but when the page is refreshed the new page state remains because it uses the action.html.erb file (I'm using PushState to update the URL, so when the jquery link is clicked it also updates the URL).
The whole goal is to make the pages faster and more interactive. I've investigated pjax and it won't work for my particular situation.
One thought is that I could do all the page loading via jquery, so anytime you refresh a page the html.erb file just fires off an AJAX request to the server and processes the returned JS. In this case, the action.html.erb files would really have nothing more than
$("#main").load("/controller/action"); # where action is action.js.erb
in it. Is this a bizarre approach to the issue, or am I approaching it completely wrong? The goal is simply loading pages via jquery and maintaining state so page refreshes leave the page in the same state.