Change URL parameter onpage load

Question

I want to change the 3rd parameter in my URL to a dynamic variable.

Eg. if my URL is http://example.com/A/B/Fixed_var_C then i want it to be changed to http://example.com/A/B/Dynamic_C

How can i achieve it by JQuery or javascript that too while the page loads?

I tried implementing few methods but not a success. Below is one of the methods:

window.history.pushState("object or string", "Title", "/new-url");

That method should work, [depending on your browser](http://caniuse.com/#feat=history). — grc, Jan 29 '15 at 11:58
It does matter because the new server request would be made to `http://example.com/A/B/Dynamic_C` — Shomz, Jan 29 '15 at 11:59
but Dynamic_C is just for show purpose. I am not fetching anythng based on this parameter — Gags, Jan 29 '15 at 11:59
did you try location.href = "http://example.com/A/B/?Dynamic_C"; — Arunprasanth K V, Jan 29 '15 at 12:01
Not possible using jQuery/javascript without refreshing the page. — Vijay, Jan 29 '15 at 12:23

score 2 · Accepted Answer · answered Jan 29 '15 at 12:01

2

url = "http://example.com/A/B/Fixed_var_C";
url = url.substr(0,url.lastIndexOf('/'))+"/Dynamic_C";
alert(url);

Demo

answered Jan 29 '15 at 12:01

Sadikhasan

18,365
21
80
122

this looks fine but how do i pass this in Address Bar without reloading page – Gags Jan 29 '15 at 12:04
but it will reload the page then – Gags Jan 29 '15 at 12:07
what you mean by `reload the page then` ? – Sadikhasan Jan 29 '15 at 12:10
@Sadikhasan i think he want to change the url with out a postback – Arunprasanth K V Jan 29 '15 at 12:11
yes @ArunprasanthKV ... i do not want to reload the page and URL shall be updated without making another request. – Gags Jan 29 '15 at 12:12
@Gags Check this link http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page may help you – Sadikhasan Jan 29 '15 at 12:16
but it is not possible in a direct way ,Check my edited answer – Arunprasanth K V Jan 29 '15 at 12:16
but location.href keeps on refreshing the page. I want to chnage URL only once... – Gags Jan 29 '15 at 12:28
that also didnt work... but achieved by using If condition :) – Gags Jan 29 '15 at 12:39
I accepted this as an answer as i have updated all my URLs on the website but now if user is coming via any OLD url then he won't mind if page reloads to correct URL :) and that too once – Gags Jan 29 '15 at 12:41

score 0 · Answer 2 · answered Jan 29 '15 at 11:59

Try the following function:

function UpdateQueryString(key, value, url) {
    if (!url) url = window.location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
        hash;

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null)
            return url.replace(re, '$1' + key + "=" + value + '$2$3');
        else {
            hash = url.split('#');
            url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) 
                url += '#' + hash[1];
            return url;
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = url.indexOf('?') !== -1 ? '&' : '?';
            hash = url.split('#');
            url = hash[0] + separator + key + '=' + value;
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) 
                url += '#' + hash[1];
            return url;
        }
        else
            return url;
    }
}

I did not get your question. The function clearly accepts 3 parameters - key, value and url. — ArinCool, Jan 29 '15 at 12:08
Already he has a url like http://example.com/A/B/Fixed_var_C and he want to change it like http://example.com/A/B/Dynamic_C , what all datas shoud pass as url,value and key in your function — Arunprasanth K V, Jan 29 '15 at 12:10

Change URL parameter onpage load

2 Answers2