window.location.hash keeps appending name instead of replacing it when links are clicked

Question

Ok, I have this script working 99% of how it should be working, but I can't seem to figure out this little bit.

When the user clicks on a link it takes the href value and chops it up and gives me the last segment of the url. In this example I'll say its home

so my script then grabs home and adds it to the url in the address bar. so it look like http://www.site.com/user/s2xi/home after its done doing its magic.

But originally I had an issue where because of the nature of how links work I suppose it would keep appending my url like this http://www.site.com/user/s2xi#/home which on my server doesn't exists

So I was able to get rid of the # and it got everything back to normal...oh wait, no not everything always works perfect on the first try...

so i then realized that my script was appending link names instead of replacing them... oh noes, now what?

my links would now look like this: http://www.site.com/user/s2xi/home/someOtherLink

it would append the new link name to old link name instead of replacing it...

my script:

var newHash    = "",
        shref      = "",
        content    = '#content',
        $c         = $("#content"),
        $cw        = $("#content-wrapper");

    $(".menu-link, #my-account-link").live('click', function(){
        shref = $(this).attr("href").split("/");
        parent.location.hash = $(this).attr("href");
        window.location.hash = shref[5];
        console.log(window.location.hash);
        return false;
    });

    $(window).bind('hashchange', function(){
        if (location.href.indexOf("#") > -1) {
            location.assign(location.href.replace(/\/?#/, "/"));
        }
        newHash = window.location.hash;
        //newHash = window.location.hash.substring(1);
        //newHash = window.location.substring(1);
        //console.log(newHash);
        if(newHash)
        {
            $cw.find(content).fadeOut(200, function() {
                $cw.load(newHash + " #content-wrapper", function() {
                    $c.fadeIn();
                });
            });
        }
    });
    $(window).trigger('hashchange');

what could be wrong with the script logic?

Answer 1

First, without /.../g, you're just replacing the first match, which may be what you want.

You logic seesm to be:

1. Replace # with link, so the hash now becomes a link
2. When you click on a link, the handler takes the last segment in the current href attribute and put it into a hash. Notice that you have not removed that segment from the url.

In other words, say it starts with:

http://www.site.com/user/s2xi

You href, say, is http://www.site.com/user/s2xi/home. Then on your click, you get shref[5] = "home". And you add it to hash of the current url, which makes it:

http://www.site.com/user/s2xi#home

And then you convert that hash back into a link:

http://www.site.com/user/s2xi/home

All is fine. The second time you click on a link, say, http://www.site.com/user/s2xi/foo. On your click, shref[5] = "foo".

You then add it to your hash of the current url:

http://www.site.com/user/s2xi/home#foo

Then you convert that hash back into a link:

http://www.site.com/user/s2xi/home/foo

Voila. You appened the link instead of replacing it. You should be replacing the segment in the url.