0

I am trying to figure out how to use a querystring with a page I created. Currently my page has a navigation menu that updates the div contents dynamically when you click a link. The navigation menu consists of a bunch of product categories (tomatoes, olive oils, etc).

My problem is that since these are not actual HTML pages, how can I set up a querystring to be able to link to a certain category from a completely different page.

Example:

  • Landing: products.html
  • Click 1: products.html?tomatoes
  • Click 2: products.html?oliveoil
Tom
  • 305
  • 1
  • 3
  • 15
  • 4
    I think you could achieve that with `window.location.href` + correct regex ([see here](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript)) – soywod Nov 30 '16 at 21:53

1 Answers1

2

You should use window.location.hash, and instead of using a ? you should use a # to split the querystring from the filename. So if you have products.html#oliveoil then window.location.hash will be #oliveoil. You will also be able to set the hash with window.location.hash = 'What-you-want'.

Martin Cup
  • 2,399
  • 1
  • 21
  • 32
  • do i have to add the window.location.hash to the onclick event? or do I have to assign every category a unique hash prior to onclick and then link to the full url with hash from a different page? thanks – Tom Nov 30 '16 at 21:59
  • 1
    From another page you gonna have a link: `products.html#oliveoil`. And on the products.html you got to get the `window.location.hash` after the page was loaded and then you have to tell what content to show. And if you click a menu link the onclick event should change the hash. So it would be good to have some reference with the same name in a data attribute in your menu link. – Martin Cup Nov 30 '16 at 22:06
  • 1
    You could use anchor tags in addition to the onclick handler to set the hash. `Olive Oil` – Steve Nov 30 '16 at 22:07
  • thank you both for these great answers I got it to work =) – Tom Dec 01 '16 at 14:22