CODEWITHSUNDEEP
jqueryurlreplacesplit
user818991
user818991

Reputation:

jQuery split/replace part of URL

I have this url

http://9001/transactions

I have buttons that need to change the url e.g 

http://9001/transactions?type=all
http://9001/transactions?type=confirmed
http://9001/transactions?type=unconfirmed

how would I go about replacing the string after transactions. I have the click functions in place just need to know what to put inside them.

the url will change so this cannot be dependant on anything before transactions (if that makes sense). Sorry if questions is vague but in a massive rush to get this done.

Upvotes: 1

Views: 1426

Answers (4)

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

See if this code works for you:

var href = window.location.href;

// This assumes the value of your button is the action and each
// button has the class button applied. Modify as necessary
$('.button').click(function (event) {
    if (href.lastIndexOf('?') !== -1) {
        href.replace(/\?(.*)/, '?type=' + $(this).val());
    } else {
        href += '?type=' + $(this).val();
    }
    window.location.href = href;
});

Upvotes: 0

Hazem Salama
Hazem Salama

Reputation: 15111

A very crude solution but it is easier to understand and implement, see if it helps

var url = "http://9001/transactions?type=unconfirmed"; //in live environment, replace with var url = window.location.href;
var urlArray = url.split('?');
var urlArrayLength = url.split('?').length;


urlArray[urlArrayLength - 1] = "type=newValue";


url  = urlArray.join('?');

alert(url)

Upvotes: 0

Josh Davenport-Smith
Josh Davenport-Smith

Reputation: 5511

I wrote a function that does exactly this, it reloads the current page, and has full support for changing existing url variables (as well as adding new ones). All you have to do is pass an object literal to the function. See here: https://stackoverflow.com/a/10235376/733347

In your case all you'd need to do is call the function as so

reloadWithQueryStringVars({"type": "all"});

or

reloadWithQueryStringVars({"type": "confirmed"});

or

reloadWithQueryStringVars({"type": "unconfirmed"});

on the click events of your buttons

Here's the entire function for reference:

function reloadWithQueryStringVars (queryStringVars) {
    var existingQueryVars = location.search ? location.search.substring(1).split("&") : [],
        currentUrl = location.search ? location.href.replace(location.search,"") : location.href,
        newQueryVars = {},
        newUrl = currentUrl + "?";
    if(existingQueryVars.length > 0) {
        for (var i = 0; i < existingQueryVars.length; i++) {
            var pair = existingQueryVars[i].split("=");
            newQueryVars[pair[0]] = pair[1];
        }
    }
    if(queryStringVars) {
        for (var queryStringVar in queryStringVars) {
            newQueryVars[queryStringVar] = queryStringVars[queryStringVar];
        }
    }
    if(newQueryVars) { 
        for (var newQueryVar in newQueryVars) {
            newUrl += newQueryVar + "=" + newQueryVars[newQueryVar] + "&";
        }
        newUrl = newUrl.substring(0, newUrl.length-1);
        window.location.href = newUrl;
    } else {
        window.location.href = location.href;
    }
}

Upvotes: 0

alex
alex

Reputation: 490243

You could build a function to change the GET param...

var updateGetParam = function(key, value) {

    window.location.search = window.location.search.replace(new RegExp("([?&;])" + key + "=.*?(&|;|$)"), "$1" + key + "=" + encodeURIComponent(value) + "$2");

}

jsFiddle.

You should run the user input through a regex escaping function first.

Upvotes: 1

Related Questions