-2

I have around 50 links in footer section in this static app. Is it possible to not create html files for all 50, instead create one html file with data related to all 50 links and hide/show relevant data based on clicked link?

Scenario:

  • User clicks a link, referred to url as http://{url}/clicked-link-id/

  • User sees data based on the clicked-link-id

I know its easy with Angular, but I am not allowed to use ui-router or any other framework/libs.

J. Parashar
  • 1,477
  • 2
  • 15
  • 24
  • 2
    Since you've identifier than Angular can do it: Yes. Angular is just JavaScript that someone else has already written. Which specific bit are you having problems with? Doing something when a click happens? Changing what is displayed on the page? Getting the content to display? Changing the URL in the address bar? Writing the server side code so that URL in the address bar works if loaded directly? As it stands your question is far too broad. – Quentin Jul 26 '17 at 13:10
  • Regarding Angular: It's not recommended to be used by the client. Regarding question being too broad: the scenario is simple> User clicks link with id "id"> user sent to url/{id}>content is shown based on that id. Asked, just to know can this pain to write multiple htmls for every link and adding href everywhere be reduced? – J. Parashar Jul 26 '17 at 13:20
  • "Regarding Angular: It's not recommended to be used by the client" — My point was that since it is JS that shows that JS can do it. – Quentin Jul 26 '17 at 13:22
  • "Asked, just to know can this pain to write multiple htmls for every link and adding href everywhere be reduced? " — Lots of ways. Most of them come down to "Use a CMS" and not "write lots of JS". If you wanted to do this with JS then I broke the problem down for you in my first comment. Which of those bits are causing you problems? – Quentin Jul 26 '17 at 13:23
  • "Too broad" doesnt necessarily mean the *question* is too broad, it means the *answer* would be! The answer to this spans everything from "Parsing a url in javascript" to "dynamically showing data" and everything in between! – Jamiec Jul 26 '17 at 13:25
  • I specifically mentioned, "vanilla JS" in title, so no Angular please.And its just a webpage with html/css/js, no back-end involved. Also, great that whole scenario has been visualized with parsing js url etc. But I just wanted a way to achieve what i mentioned, not the v8 interpreting the js. however if someone goes into details, that's always helpful for community. – J. Parashar Jul 26 '17 at 13:38

1 Answers1

1

One approach which can be followed here is to parse the url to retrieve the clicked-link-id using JavaScript.

Once the clicked-link-id is obtained, a function can be written to display the element with content related to the link.

There are many ways to split the url to find the relevant info. One crude way to do it assuming the link retains the structure shared by you:

var url = document.location.href;
var splitUrl = url.split("/");
var linkId = splitUrl[splitUrl.length - 1] || splitUrl[splitUrl.length - 2];

There are other things which also need to be considered here. There needs to be a configuration probably on the web-server side to redirect all the page requests with a certain structure to the page which contains this logic. Otherwise you might get 404 error for all such requests.

Jay
  • 1,478
  • 1
  • 10
  • 9