Replacing string queries in URL's with Javascript (conditional)

Question

I'm trying to switch back and forth between two different modes in my website. One mode is "Grid" and the other is "List". So in the url it would be www.example.com/index.php?mode=grid and when you click on a specific link it would change the mode to list. My code only takes it from index.php to one of the queries once;

The Javascript:

    function gridclick(){
        if(location.href.match(/\?mode=/)){
            var reExp = /mode=\d+/;
            var url = window.location.toString();
            var newUrl = url.replace(reExp, "mode=" + "grid");
        }
        else{


    window.location="index.php?mode=grid";
    }
}

function listclick(){
    if(location.href.match(/\?mode=/)){
        var reExp = /mode=\d+/;
        var url = window.location.toString();
        var newUrl = url.replace(reExp, "mode=" + "list");
    }
    else{
        window.location="index.php?mode=list";
    }
}

The HTML:

<img src="images/grid.png" width="18" height="18" alt="Grid view" onClick="gridclick()"/> 
<img src="images/list.png" alt="List view" width="18" height="18" onClick="listclick()"/>

Yea, you're right @Jeffman. I added window.location = newUrl; to both but it wont change after being clicked the second time. — pedrum golriz
– pedrum golriz, Commented Aug 30, 2013 at 23:29

Suvi Vignarajah · Accepted Answer · 2013-08-30 23:36:48Z

1

Use location.search to toggle the query parameter and refresh the page. It will also minimize your javascript a ton, see below:

function gridclick(){
    location.search = "mode=grid";
}

function listclick(){
  location.search = "mode=list";
}

UPDATE:

Actually to make it even more efficient I'd modify your code to the following..

HTML:

<img src="images/grid.png" width="18" height="18" alt="Grid view" onClick="toggleView('grid')"/> 
<img src="images/list.png" alt="List view" width="18" height="18" onClick="toggleView('list')"/>

And just have one function handling your view toggle.

Javascript:

function toggleView(view){
  location.search = "mode=" + view;
}

answered Aug 30, 2013 at 23:36

Suvi Vignarajah

5,80829 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pedrum golriz Over a year ago

Oh wow, I didn't think it could be that simple. Thank you. How do I have this so it doesn't replace all other queries?

Collectives™ on Stack Overflow

Replacing string queries in URL's with Javascript (conditional)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related