How to trigger different functions on hash change based on hash value with jQuery?

Question

I'm using Ben Alman's jQuery hashChange event plugin. the hash part looks like this:

#x=1&y=2&z=3

I already have functions that parse it getHashPart(key) and setHashPart(key).

I would like to have a function that would allow to register with the change of only a specific part of the hash. I would use it as such (I guess...):

$(window).hashchange('x',function(new_value_of_x) {do something x related;});
$(window).hashchange('y',function(new_value_of_y) {do something y related;});

How would I register such a function with jQuery? anything similar exists?

Thanks!

bennadel.com/blog/… explains how you can setup an onchange event for the url of the page. However, if you are doing what I think you are doing, you should bind the links which set the hash to perform what you want it to do, and then on document load check if there was any hash in the url to perform the action it should. — Niklas
– Niklas, Commented May 30, 2011 at 10:05
ps. If I were you, I'd change the title of the question to something like "How to trigger different functions on hash change based on hash value with jQuery?". Just an offer. — Ege Özcan
– Ege Özcan, Commented May 30, 2011 at 15:24

Ege Özcan · Accepted Answer · 2011-05-30 15:17:37Z

4

You can have a function that responds to all hashchange events (preferably keeping the hashchange plugin in use), then redirect to individual handlers like this:

var hashParameters = {};

$(window).bind("hashchange",function(event) {
//if you're using the awesome hashchange plugin
//$(window).hashchange(function(event) { ...
    var newParameters = getParameters(event.target.location.hash.substring(1));
    $.each(newParameters, function(key, value) {
       if(hashParameters[key] !== value) $(window).trigger(key + "-change");
       hashParameters[key] = value;
    });
});

$(window).bind("andsome-change", function() {
    alert("hi!");
});

function getParameters(paramString) {
    //taken from http://stackoverflow.com/questions/4197591/parsing-url-hash-fragment-identifier-with-javascript/4198132#4198132
    var params = {};
    var e, a = /\+/g, r = /([^&;=]+)=?([^&;]*)/g,
        d = function (s) { return decodeURIComponent(s.replace(a, " ")); };
    while (e = r.exec(paramString))
       params[d(e[1])] = d(e[2]);
    return params;
}

window.location.hash = "some=value&andsome=othervalue";

I have a working demo here (now with hashchange plugin, see first comment).

edited May 30, 2011 at 15:17

answered May 30, 2011 at 15:00

Ege Özcan

14.3k2 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thomas Shields Over a year ago

+1, fyi, you can include external scripts in a jsFiddle - on the left click "Add Resources" and paste the link in. Alternatively, just stick <script src="whatever" ></script> in the HTML frame.

Ege Özcan Over a year ago

that "I couldn't" means "I was just too lazy" too =)) thanks a lot for the suggestion and here is link with the fix: jsfiddle.net/TuVBL/1

Collectives™ on Stack Overflow

How to trigger different functions on hash change based on hash value with jQuery?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related