I have looked at all of the most popular questions on here, including the ones that reference the most popular plugins like BBQ and jQuery Address.
However, there is something I am missing. I need instruction a step back from anything I have seen in those projects. They assume some basic knowledge that I apparently don't have, and I am unable to deduce what each line of code in the examples is actually doing.
I want to do four things:
1) Make the forward button work like it does in a non-AJAX app.
2) Make the backward button work like it does in a non-AJAX app.
3) Reflect the url in the address bar so that it can be bookmarked.
4) Generate deep links so that the AJAX stuff can be crawled.
And that is all. Anything else is overkill. This is a Rails 3.0.4 application, and I have links that all have an href of "#". Clicking on one of the links activates a function from application.js that replaces the html in a div on the current page with more links created from a partial that is rendered from a .js.erb file.
I have a breadcrumb trail that works just fine, but using the back button will take you to whatever website you were looking at before you looked at the application.
So some of my questions are:
1) Do each of my links need a unique href value instead of a simple "#"?
2) Should I be replacing that div each time, or simply hiding it and creating a new one. If so, should each new div have a new id?
3) Since currently the url in the address bar doesn't change, and these AJAX requests are all POSTS, do I have to do anything in Rails to make it respond to one of these new URLs which will invariably trigger a GET request when accessed via browser history or back button?
These are the barriers that are keeping me from running with the existing questions out there. Thanks a lot for any help you can offer!
EDIT:
My application is not tab based. Not all the anchors are available when the page loads. Here is what happens when a user clicks a link:
1) A field in a hidden form is filled in with the text value of the link that was clicked.
2) The hidden form is serialized and delivered to a controller action with POST.
3) The controller action determines who made the request, figures out what data they have access to, and uses the form values (now params) to retrieve a list of objects.
4) Those objects are passed to a .js.erb view template that in turn render a partial with the values that were passed.
5) The new links are rebound via js in the .js.erb template.
Basically, since my data is not static, I need to figure out how to re-generate that POST request with the forms state AS IT WAS in order to really "go back". Or can the form state, and the screen be cached somehow?
1) Do each of my links need a unique href value instead of a simple "#"?
Yes, the browser only detects changes in the URL. if the current url is foo.com/#, and the user clicks a link that takes him to foo.com/#, well, how is the history supposed to know he went anywhere?
So, you put unique text after the #. foo.com/#home and foo.com/#about will generate unique history entries. Then when a user bookmarks one of those, you can parse the latter part of the URL to find out where he was.
2) Hide and swap divs, or replace?
You'll save on traffic overhead if you're not fetching the contents of each div each time. If the content is small enough, put it all in the page and just hide/show the divs. If the content is large, only fetch it the first time they click on it. i.e. I'm on A and click on B, you should hide A and make an ajax request to get B's content, then show B. Then if I click back to A, you show the A that's already there and hide B. No need to make another server request to get A when you already have it.
3) Since currently the url in the address bar doesn't change, and these AJAX requests are all POSTS, do I have to do anything in Rails to make it respond to one of these new URLs which will invariably trigger a GET request when accessed via browser history or back button?
The new URLs won't trigger a GET request on each use of the back button. The handiness of the # style is that anything after the # doesn't get sent to the sever. i.e. if you go to foo.com/bar.html#home, the client makes a GET request to foo.com/bar.html. Then if the user transitions to foo.com/bar.html#about, the browser doesn't make another request on its own. the # was originally there to denote links to content within the same page (i.e. a large document, where you might want to have an index that links to the top of each chapter).