Replace url parameter dynamically

Question

I have a script that adds the value from a clicked element. However - I would like to replace the value with the new one when clicked.

Example:

<ul class="acfilter">
 <li><a href="reset">reset</a></li>
 <li><a href="One">One</a></li>
 <li><a href="Two">Two</a></li>
</ul>

Script

$(document).ready(function() {
    $('ul.acfilter li a').on('click', function(e) {
        e.preventDefault();
        if ($(this).attr('href') != "reset") {
            if (location.href.indexOf('?') === -1) {
                location.href = location.href + "?fss=" + $(this).attr('href');
            } else {
                location.href = location.href + "+" + $(this).attr('href');
            }
        } else {
            location.href = location.origin + location.pathname;
        }
    });
});

First parameter onclick gives ?fss=one and on the second click you get ?fss=one+two. The reset link clears it.

However - I would like to replace the "one" value with the "two" value on the click. The value is dynamic - so I cant just do If/Else url.replace with the known value.

How do I do this?

Edit:

Forgot to mention that there can be other parameters in the url. Example:

First click gives

?fss=one

and the when doing an action that gives the other parameter I mention it gives this:

?param=list&fss=one

which is correct by using the script from user brijesh chowdary lavu. The param=list is a parameter that always has to be first, and is written to do so and changes from list to largelist, this also works with that script.

Problem is when I click on my specific class a second time - instead of going from

?param=list&fss=one

to

?param=list&fss=two

it replaces everything to

?fss=one

try these anwers http://stackoverflow.com/questions/5999118/add-or-update-query-string-parameter — gurvinder372, Jan 25 '16 at 07:53

brijesh chowdary lavu · Answer 1 · 2016-01-25T10:11:40.270

Try this.

 $('ul.acfilter li a').on('click', function(e) {
    e.preventDefault();
    if ($(this).attr('href') != "reset") {
        if (location.href.indexOf('?') === -1) {
            location.href = location.href + "?fss=" + $(this).attr('href');
        } else {
            location.href = location.origin + location.pathname + "?fss=" + $(this).attr('href');
        }
    } else {
        location.href = location.origin + location.pathname;
    }
});

Or with simple string methods, you can add a function to your script like below, so that other parameters don't have to change:

$(document).ready(function() {
$('ul.acfilter li a').on('click', function(e) {
    e.preventDefault();
    if ($(this).attr('href') != "reset") {
        if (location.href.indexOf('?') === -1) {
            location.href = location.href + "?fss=" + $(this).attr('href');
        } else {
            location.href = changeParameter(window.location.toString(),"fss",$(this).attr('href'));
        }
    } else {
        location.href = location.origin + location.pathname;
    }
});

});
     function changeParameter(str,par,val)
    {
            var t1 = str.indexOf(par);
            var t3 = t1+par.length+1;
            var t2= str.indexOf("&",t3);
            if(t2==-1)
            {
                return str.substring(0,t3)+val;
            }
            else
            {
                return str.substring(0,t3)+val+str.substring(t2);
            }
    }

well, maybe, but certainly not a general solution as it wouldn't work if he had ?fss=one&foo=bar — Gavriel, Jan 25 '16 at 08:02
This works - but fails if I have another parameter in the url - it then replaces that one too instead of adding it - i only want to replace the value from the specified class. Maybe should have mention that this could be the case. — Jerry, Jan 25 '16 at 08:22
Hmm the second part don't seems to work - it gave me an url of /httone when another parameter was present. — Jerry, Jan 25 '16 at 09:46

Charlie · Answer 2 · 2016-01-25T09:30:30.040

0

You need to track your parameter fss (not the value) and replace the value of it all the time.

The best way to do this is by split from the point of fss.

//Lets split the href by the param fss
var urlParts = location.href.split("fss");

//Insert your new value together with the param. (split removes the param)
if (location.href.indexOf("?") < 0) 
   location.href = urlParts[0] + "?fss=" + $(this).attr('href');
else    
   location.href = urlParts[0] + "fss=" + $(this).attr('href');

And for resetting

location.href = location.href.split("fss")[0];

edited Jan 25 '16 at 09:30

answered Jan 25 '16 at 09:16

Charlie

22,886
11
59
90

Hi Charlie and thanks for the reply. However - I dont seems to be able to get this working, would you be kind do show me how to write it to work with my reset option? – Jerry Jan 25 '16 at 09:24
Sorry - there was a mistake. Answer updated. `split` creates an array out of the parts of the string sans the delimiter (fss). Thats the theory here. – Charlie Jan 25 '16 at 09:29

Replace url parameter dynamically

2 Answers2