Update parameter on click

Question

I have a script that adds a parameter to the url on a click - and replaces the the parameter with another on the second click. This works great.

However there is a scenario when there already is a parameter in place - and I then need this click to replace that value.

Example:

Click one gives

?param=largegrid

Second one replaces the value and gives

?param=smallgrid

But sometimes the url looks like this:

?param=grid or param=grid&fss=tablet

in this case i want the click to replace the first value so the url looks like

?param=large or param=largegrid&fss=tablet

and the same for the second click.

$('.click10').on('click', function() {
console.log("Clicked");
var url = window.location.pathname;
var url = window.location.href;
if (url.indexOf('?param=largegrid') > -1) {
url = url.replace("?param=largegrid", "") + '?param=smallgrid'
} else {
url = url.replace("?param=smallgrid", "") + '?param=largegrid'
}
window.location.href = url;
});

Have look at [add or update query string parameter](http://stackoverflow.com/questions/5999118/add-or-update-query-string-parameter) — Satpal, Jan 25 '16 at 09:23
You could split the URL then apply your logic to each piece then rebuild it again — StudioTime, Jan 25 '16 at 09:23
link provided by Satpal is exactly what you are looking for. — pratikpawar, Jan 25 '16 at 09:27

Sravan · Answer 1 · 2016-01-25T10:05:28.953

1

You can try this, search for the param of either grid or large-grid and next you can replace them alternatively.

if (url.indexOf('?param=grid') > -1) {
url = url.replace("grid", "") + 'largegrid'
} else if(url.indexOf('largegrid') > -1) {
url = url.replace("largegrid", "") + 'smallgrid'
} else if(url.indexOf('smallgrid') > -1) {
url = url.replace("smallgrid", "") + 'largegrid'
}

edited Jan 25 '16 at 10:05

answered Jan 25 '16 at 09:43

Sravan

16,897
2
24
48

That worked but only for largegrid - it removed the smallgrid functionality. – user3344734 Jan 25 '16 at 09:52
In the third point you have mentioned, you mentioned about grid and large grid.When you need small grid? – Sravan Jan 25 '16 at 10:02
Hmm. Its close! the problem now is that the buttons i have for smallgrid and largegrid doesn't work if there is no parameter - they only work if =grid is in the url. Almost! – user3344734 Jan 25 '16 at 10:11
If you find my answer helpful, please do accept it. – Sravan Jan 25 '16 at 10:17

Tushar · Answer 2 · 2016-01-25T09:30:05.327

0

You can use the regex for that like

url= url.replace(/(largegrid=)[^\&]+/,updated_largegrid);

Update

Okay what you can do is(as per your posted code) :

Have the onclick function
Inside that use var url = window.location.href;
Now replace all the variables like url= url.replace(/(largegrid=)[^\&]+/,updated_largegrid);
You are good to go now

edited Jan 25 '16 at 09:30

answered Jan 25 '16 at 09:25

Tushar

11,306
1
21
41

Hi Tushar - do I add or replace a part of my code with the regex? My script skills aren't that good, unfortunaly :) – user3344734 Jan 25 '16 at 09:27
@user3344734 Updated \m/ – Tushar Jan 25 '16 at 09:30
Hmm. tried this: http://codepen.io/anon/pen/OMQKMy but that script didnt work. What did i miss there? Thanks again! – user3344734 Jan 25 '16 at 09:41

score 0 · Answer 3 · answered Jan 25 '16 at 09:49

I can recommend to library URI.js. It helps parsing and building URIs/URLs. For example, you don't need to worry if the query parameter already exists:

For example, both

var newURL = URI("http://www.example.com/").setQuery("param", "smallgrid").toString();

and

var newURL = URI("http://www.example.com/?param=largegrid").setQuery("param", "smallgrid").toString();

both result in http://www.example.com/?param=smallgrid

An example for your event handler using a callback:

$('.click10').on('click', function() {
  var url = window.location.href;

  url = URI(url).search(function(queryData) {
      queryData.param = (queryData.param === "largegrid") ? "smallgrid" : "largegrid";
  });

  window.location.href = url;
});

Update parameter on click

3 Answers3

Update