So I adapted some of the other methods of using the anchor href hash.
Much of this concept I got from
http://www.mikage.to/jquery/jquery_history.html and adapted to Prototype
javascript.
This method works as follows:
You use a custom helper method, called history_remote, instead of
link_to_remote whenever you want a new ‘page’ that can be navigated to
using the back/forward buttons in the browser, or bookmarked. This adds
another parameter to the Ajax.Request in the onclick of the ahref,
history:true, which tells Ajax.Request to do the back button handling if
it is IE or FF. Other browsers should be unaffected, but without
support for back button.
Add this to your application_helper.rb:
module ActionView
module Helpers
module PrototypeHelper
def history_remote(name, options = {}, html_options = {})
options[:history] = true
function = remote_function(options);
function.gsub!(/asynchronous:true/, ‘asynchronous:true,
history:true’)
link_to_function(name, function, html_options)
end
end
end
end
Add this to your application layout.rhtml:
.... ....Add the following function to the prototype.js:
/////////////////////////////////////////////////////////////
// this needs to be here even if history is disabled
var browser_id = 0;
ie_history_click = function(hash) {
var newhash = ‘#’ + hash;
location.hash = newhash;
var history = $(“ie_hash_history”);
var iframe = history.contentWindow.document;
iframe.open();
iframe.close();
iframe.location.hash = newhash;
}
////////////////////////////////////////////////////////////
And modify the Ajax.Request request function to this:
request: function(url) {
if (browser_id == 1 && this.options.history == true) {
ie_history_click(url);
} else if (browser_id == 2 && this.options.history == true) {
parent.location = '#' + url;
} else {
// we want to actually call for all other browsers and for
non-history
// links in IE and FF
var parameters = this.options.parameters || ‘’;
if (parameters.length > 0) parameters += ‘&_=’;
try {
this.url = url;
if (this.options.method == 'get' && parameters.length > 0)
this.url += (this.url.match(/\?/) ? '&' : '?') + parameters;
Ajax.Responders.dispatch('onCreate', this, this.transport);
this.transport.open(this.options.method, this.url,
this.options.asynchronous);
if (this.options.asynchronous) {
this.transport.onreadystatechange =
this.onStateChange.bind(this);
setTimeout((function()
{this.respondToReadyState(1)}).bind(this), 10);
}
this.setRequestHeaders();
var body = this.options.postBody ? this.options.postBody :
parameters;
this.transport.send(this.options.method == ‘post’ ? body :
null);
} catch (e) {
this.dispatchException(e);
}
}
},