December 2, 2011

Using jQuery to append URL with anchor #

Question by jeffkee

While retrieving items via AJAX etc., the links are set to do this:

$(this).click(function(){
ajax_function(); // hypothetical ajax call that puts data into a <div> of my choice
return false;
});

In this scenario, I’m wondering what the best way is to utilize jQuery to add things to my URL in this format:

http://www.mydomain.com/products

turns into

http://www.mydamain.com/products#category-12,page-4

Further note- I’m talking about the actual URL of the browser (in the URL bar) not a URL that is part of the DOM.

Answer by jeffkee

After searching some more (with better keywords than before on Google) I found the answers I needed, and I wrote the following functions:

    function get_url_hash(argument) {
    var hash = location.hash.replace('#','');
    if(argument=='' || argument==undefined) {
        return hash;
        alert(blank);
    } else {
        var foundhash = false;
        // specific argument given - let's find the value attached. 
        var hashblock = hash.split(',');
        for(x in hashblock) {
            var hasharray = hashblock[x].split('-');
            if(hasharray[0]==argument) {
                return hasharray[1];
                foundhash = true;
            }
        }
        if(foundhash==false) {
            return false;
        }
    }
}

function modify_url_hash(argument, value) {
    // This function goes through the entire hash,
    // figures out which parts of the hash should be added, updated or removed based on entry, 
    // and then spits out final result. 
    var hash = get_url_hash();
    var foundhash = false; // foundhash is set to false by default. if this hash is NOT found, then we add it at the end! 
    var hashcount = 0; // keep count of total # so as to determine where to put the commas etc. 
    var newhash = '';
    if(hash.length>0) {
        var hashblock = hash.split(',');
        for(x in hashblock) {
            var hasharray = hashblock[x].split('-');
            if(hasharray[0]==argument) {
                hasharray[1] = value;
                foundhash = true;
            }

            if(hasharray[1]!=false && hasharray[1]!='') { // if new value is NOT false, we keep it in.. otherwise don't feed it to newhas so it disappears.
                if(hashcount>0) { newhash = newhash+','; }
                newhash = newhash+hasharray[0]+'-'+hasharray[1];
                hashcount++;
            }

        }
    }

    if(foundhash==false) {
        // this is a new hash block. 
        if(hashcount>0) { newhash = newhash+','; }
        newhash = newhash+argument+'-'+value;
    }
    location.hash = newhash;
}

Answer by Starx

May be something like

oldlink = $('#mylinkselector').attr("href");
newlink = oldlink="#category-12,page-4";
$("#mylinkselector").prop("href",newlink);

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!