Why does the jQuery Asual Address plugin fire the change event twice?

Question

Greetings,

I'm using the jQuery Asual Address plugin: http://www.asual.com/jquery/address/

For some reason, in Firefox and IE (but not Chrome), the address change event is firing twice when one of the parameters is a url (starts with "http://").

Here's a fiddle with an example: http://jsfiddle.net/5L6Ur/

Clicking on the "foo" link demonstrates my problem. Any help is greatly appreciated.

Code:

$(function() {
    $('a').click(function(e) {
        e.preventDefault();
        $.address.value($(this).attr('href'));
    });
    var changecount = 0;
    $.address.change(function(event) {
        $('span').html(changecount++);
    });
});

<a href="?u=http://foo.bar">foo</a><br />
<a href="?u=foo.bar">bar</a><br />
<span></span>

Answer 1

Looks like the latest version of the plugin on github (1.4) fixes this.

Here's an updated example using the latest plugin: http://jsfiddle.net/5L6Ur/10/

Answer 2

Try using the internalChange and externalChange functions.

http://jsfiddle.net/5L6Ur/9/

Answer 3

My workaround for this the problem is setting the searching variable.

something like:

$(function () {
  var searching = false;
  $('form.ajaxified').live('ajax:beforeSend.rails', function(){
    $.address.value('?' + $('form.ajaxified').serialize());
    searching = true;
  });
  $('form.ajaxified').live('ajax:complete.rails', function(){
    searching = false;
  });
  $.address.externalChange(function(event) {
    if (!searching) {
      $('form.ajaxified').submit();
    }
  });
});

This prevents the double ajax requests when I trigger it as a user (by submitting a form) but runs it when I hit back button or reload the page. Hope that helps.

PS The events are rails specific, but the same could be accomplished using JQuery Ajax calbacks.

Answer 4

I spent a lot of time troubleshooting this same issue. I've narrowed in on the cause, but I don't have a solution to offer, other than avoidance. The problem is caused by the "=" in the hash value you are creating in your example. I'm guessing the issue has to do with the parsing performed by the plugin, because I've recreated the problem with many common delimiter characters ("=", "&", "|", ":", ";"). You can avoid the double-firing problem by replacing these troublesome characters with others (I'm using "/" and ".").

Here's a more specific explanation of the symptoms I'm seeing. The double-firing of the change event happens in both IE and Firefox using either the .change() method or a combination of the .externalChange() and .internalChange methods. If using the .change() method, there's no real indication of what's happening, but using the internal and external methods allows you to see a little deeper into the problem. The internal change event seems to behave properly, only firing when the triggering event is actually internal. However, the external event seems to fire all the time, regardless of whether the triggering event is internal or external. The result is that external events fire "correctly," meaning that only the externalChange() method is fired. Internal events fire "incorrectly," result in double-firing -- the internalChange() method fires as expected, but the externalChange() method fires as well.

Hope this helps.

Answer 5

You should not wrap it with the $(function () { }); function. Then it works