Double remote call with jQuery Address plugin and Rails 3 remote links

Question

I'm using this jQuery plugin
http://www.asual.com/jquery/address/
because I have a full ajax site hacked in Rails 3.1.0 but my actions/methods also respond to html requests.

so if I have a link

<%=link_to "my link",{:controller=>"my_controller",:action=>"my_action"},:remote=>true%>

It'd do the call but URL will stay the same and if i share the URL you'll be always looking at the root page / page but with this plugin i get to call the remote method of my_controller and also change the displaying url with

var elemetns = $("a.addressPlugin");
 $.address.crawlable(1).state('/').init(function(){
    elemetns.address();
 });

my new link

<%=link_to "my link",{:controller=>"my_controller",:action=>"my_action"},:class=>"addressPlugin",:remote=>true%>

now my url looks like

http://localhost:3000/my_controller/my_action

but when i hit back on the browser it the page stays with no change

then I figured it to to do this

var elemetns = $("a.addressPlugin");
 $.address.crawlable(1).state('/').init(function(){
    elemetns.address();
 }).change(function(e){
        $.ajax({type:'GET',url:e.path,dataType:'script',cache:true});
 });

so now it does the trick backward and forward but ....

when i Click the link it does the remote call twice.... once for the link itself and one for the .change(... method.... but when I go backwards it works perfectly it only does the call once on the .change(... method.... so

How can I prevent the $.ajax call to be made only when going backward and forward on the browser and not when clicking links because they already do the call by them selves?

<< -- UPDATE -- >>
In Safari and Chrome browsers when I get in history one step back from my main page and then I navigate forward with the browser's buttons I get a complete white screen displaying only the javascript function that loads my main/index view via ajax but there's only that in the browser

<< -- UPDATE -- >

Basically this is what I'm trying to replicate but using ruby on rails and their remote links

http://www.asual.com/jquery/address/samples/state/

Answer 1

One way to keep the back button working properly on a single page interface is to use a hash in the URL. Twitter is a site which does this.

The hash tells that browser that we are simply moving to an anchor on the current page, so the page does not reload, but the URL is added to the browser history. This means that if you treat the URL properly with Javascript and load the content you want based on the URL fragment (the part after the hash), then the back button should still work fine.

I can't give you specifics on exactly how to integrate this into your application, but if you can use /my_controller#my_action instead of /my_controller/my_action, you should be able to make this work. Javascript would need to load the page content using AJAX based on the URL fragment.

Here are some links that may help you out:

• What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?
• http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php

Answer 2

Why do you use the .change event binder? Try using the .click event binder instead. Also, make it return false; in order to prevent the default action.

var elemetns = $("a.addressPlugin");
$.address.crawlable(1).state('/').init(function(){
    elemetns.address();
}).click(function(e){
    $.ajax({type:'GET',url:e.path,dataType:'script',cache:true});
    return false;
});

Answer 3

What I would try is to have the links execute an event handler that would check a global flag. Then in the change event of the address I would check that flag and only perform the action if it's not set.

For example:

var throughNormalLink = false;

$.address.crawlable(1).state('/').init(function(){
    elemetns.address();
}).change(function(e){
    if(!throughNormalLink)
        $.ajax({type:'GET',url:e.path,dataType:'script',cache:true});
    else // Update: reset the flag
        throughNormalLink = false;
});

$("a").click(function() {throughNormalLink = true; .../* the rest of your code */});