windows.location.pathname not working

Question

I'm having issue with one of my cases not working. They all work except for one, which actually has queries in the URL, but they are always the same. The query URL looks like this: http://mywebsite.com/search/?q=label:Web-Design|label:Graphic-Design|label:Identity-Design|label:Brand-Design

It's not working and I'm wondering if windows.location supports queries in URL. It seems to me it wouldn't matter, but either way I cannot get this working.

I'm 100% positive that is the correct pathname, as I copied & pasted it, only to remove the domain just like the rest.

This is what I am using:

    <script type='text/javascript'>
      $(document).ready(function(){
        switch (window.location.pathname) {
          default:
              $('.nav-blog').addClass('current');
              break;
          case '/p/about.html':
              $('.nav-about').addClass('current');
              break;
          case '/':
              $('.nav-home').addClass('current');
              break;
          case '/search/blog':
              $('.nav-blog').addClass('current');
              break;
          case '/p/forums.html':
              $('.nav-forums').addClass('current');
              break;
          case '/search/?q=label:Web-Design|label:Graphic-Design|label:Identity-Design|label:Brand-Design':
              $('.nav-design').addClass('current');
              break;
          case '/p/photography.html':
              $('.nav-photography').addClass('current');
              break;
          case '/p/hosting.html':
              $('.nav-hosting').addClass('current');
              break;
        }
      });
    </script>

Step through your code with a debugger. It should be quite evident if you inspect the value of `window.location.pathname`. — Matt Ball, Sep 02 '13 at 03:23
I don't know if this will help or not, but I always but my default as the last option in a select list, see if it fixes your problem... I don't think it will but give it a try and see. — Neaox, Sep 02 '13 at 03:26
@MattBall can you point mein teh direction of a debugger? In my chrome console there are no errors. — Xarcell, Sep 02 '13 at 03:28
window.location.pathname in switch statement is working fine for me. — Konsole, Sep 02 '13 at 03:28
@Xarcell The Chrome developer tools contains a JavaScript debugger. Open your script in the *Sources* tab and add breakpoints — Phil, Sep 02 '13 at 03:32
@Neaox what should I use then? windows.location.url doesn't work either... — Xarcell, Sep 02 '13 at 03:34
`window.location.path + window.location.search` but as I said in my answer that will fail against the other cases if for some reason they have query strings on the end of them. Also your switch is currently case sensitive, you might need to separate the search case out of the switch and check that first to see if the path matches `/search/` if it does check the query string if not go into the switch. — Neaox, Sep 02 '13 at 03:37
Chrome's dev tools have far more than a console. There's a debugger built right in. https://developers.google.com/chrome-developer-tools/docs/javascript-debugging — Matt Ball, Sep 02 '13 at 05:40

Neaox · Accepted Answer · 2013-09-02T03:43:58.743

Change the variable in the switch to include the query string

$(document).ready(function(){
        switch (window.location.pathname + window.location.search) {
          default:
              $('.nav-blog').addClass('current');
              break;
              case '/p/about.html':
              $('.nav-about').addClass('current');
              break;
              case '/':
              $('.nav-home').addClass('current');
              break;
              case '/search/blog':
              $('.nav-blog').addClass('current');
              break;
              case '/p/forums.html':
              $('.nav-forums').addClass('current');
              break;
              case '/search/?q=label:Web-Design|label:Graphic-Design|label:Identity-Design|label:Brand-Design':
              $('.nav-design').addClass('current');
              break;
              case '/p/photography.html':
              $('.nav-photography').addClass('current');
              break;
              case '/p/hosting.html':
              $('.nav-hosting').addClass('current');
              break;
        }
      });

However this will not match against the other cases if they have querystrings on the end, also currently your switch statement is case sensitive, you should probably toUpperCase() or toLowerCase() your switch.

This should fix most of your issues:

$(document).ready(function(){
    var path = window.location.pathname.toLowerCase();
    if(path == '/search/')
    {
        if(window.location.search.toLowerCase() == '?q=label:web-design|label:graphic-design|label:identity-design|label:brand-design')
            $('.nav-design').addClass('current');
        else
            $('.nav-blog').addClass('current');
    }
    else
    {
        switch (path) {
          default:
            $('.nav-blog').addClass('current');
            break;

            case '/p/about.html':
                $('.nav-about').addClass('current');
                break;

            case '/':
                $('.nav-home').addClass('current');
                break;

            case '/search/blog':
                $('.nav-blog').addClass('current');
                break;

            case '/p/forums.html':
                $('.nav-forums').addClass('current');
                break;

            case '/p/photography.html':
                $('.nav-photography').addClass('current');
                break;

            case '/p/hosting.html':
                $('.nav-hosting').addClass('current');
                break;
        }
    }
});

You should do even more sanitization of your inputs (window.location.path, window.location.search) than I am here like trimming them (removing leading and trailing whitespace) and removing the leading and trailing slashes etc.

Also what happens if for some reason your query string values are in a different order?

Things like this can happen for instance someone emails a link and it has a extra space at the end or somewhere in the query string, when the recipient clicks the link they may go to the right page but your switch will hit the default.

the second option worked for me, but I need more time to wrap my head around it a little better. the whole toLowerCase() is throwing me off a bit... — Xarcell, Sep 02 '13 at 04:00
The first bit worked for me too. It I understand, and I was unaware of windows.location.search. This opens new doors for me so that I can address other issues in relation. Thanks. — Xarcell, Sep 02 '13 at 04:03
`toLowerCase` basically converts all the characters in a string to their lowercase counterparts etc A to a, B to b, C to c etc when comparing strings you can convert both the strings being compared to lowercase which allows you to perform case insensitive comparisons. See this question for more information - http://stackoverflow.com/questions/4919403/javascript-compare-strings-without-being-case-sensitive — Neaox, Sep 02 '13 at 04:12

windows.location.pathname not working

1 Answers1