Adding a parameter to the URL - always make sure it places before other parameters

Question

I have a script that I use to switch between two layout when a button is clicked by adding a string to my url. It works great - but I need to control how the param string is inserted to my url to work with a filter that also adds strings to the url.

The url structure looks like this

/Computers/Desktops = loads gridcode
first click = /Computers/Desktops?param=list = loads listview
second click = /Computers/Desktops?param=grid = loads gridview

This works great - but my problem is that I have a set of filters that adds strings to the url which mess my layout switch not working.

Example:

first click = /Computers/Desktops?param=list = loads listview

I start to add filters:

/Computers/Desktops?param=list&fss=2GB+SSD

This works - but when I change the layout:

/Computers/Desktops&fss=2GB+SSD?param=grid

Here the paramstring is inserted after the filterstring, and this breaks the filtering. I need it to be inserted before:

 /Computers/Desktops?param=grid&fss=2GB+SSD

There is also a variable where someone could filter before switching a layout:

/Computers/Desktops?fss=HP+2GB

And when switching layout now:

/Computers/Desktops?fss=HP+2GB?param=list

Also here the param needs to be inserted before the filterstrings. The /Computers/Desktops is dynamic and changes as well depending on category.

My Script

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

You really should have a look at this question: [How can I get query string values in JavaScript?](https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) — Andreas, Dec 27 '15 at 10:02
HI! I did in fact read some in that post before - but I cant make out how to filter out what part I need to make a working change for my script. — Jerry, Dec 27 '15 at 10:10
Just use the function from the highest voted (and accepted) answer: `var param = getParameterByName("param");` This will give you the value of the `param` parameter in the url regardless of its position — Andreas, Dec 27 '15 at 10:42
Hi @andreas. Still not sure how to write it - I changed my $(function() { to $(function getParameterByName(name) { but that didn't change anything. — Jerry, Dec 27 '15 at 11:22
Also - my paramscripts works as is it - i just need to make sure that they always gets injected before any other parameters in the url. — Jerry, Dec 27 '15 at 11:40

wui · Accepted Answer · 2015-12-27T12:32:44.223

1

You can do it this way by using the above mentioned function:

 $('.click').on('click', function() {
var baseUrl =  window.location.href.split("?")[0];
var fss = getParametersByName("fss");
var params = getParametersByName("params");
if(params == "list") params = "grid"; else params = "list";
var newUrl = baseUrl+"?params="+params;
if((fss).length>0) newUrl = newUrl+"&fss="+fss;
window.location.href=newUrl;

}

function getParametersByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));}

from here:How can I get query string values in JavaScript? which is already mentioned.

edited Dec 27 '15 at 12:32

answered Dec 27 '15 at 12:04

wui

400
3
11

Hi! this doesnt seems to work - it gives me an error: Uncaught ReferenceError: getPametersByName is not defined – Jerry Dec 27 '15 at 12:20
function getParametersByName(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } – wui Dec 27 '15 at 12:25
Ho @koded - not sure how to write this with my current script? – Jerry Dec 27 '15 at 12:27
Ok, I added the function - and it kinda works. The urls changes like i want! For some reason they load the same script for both layouts though ibstead of the code in the if/else statements. One step closer! – Jerry Dec 27 '15 at 12:31
Never mind - it works! I had to change params to param. amazing - that was very interesting, thank you. – Jerry Dec 27 '15 at 12:33

Adding a parameter to the URL - always make sure it places before other parameters

1 Answers1