We Keep Coding

dynamically generate content for a page when clicking on product

everyone. I am making a website with t-shirts. I dynamically generate preview cards for products using a JSON file but I also need to generate content for an HTML file when clicking on the card. So, when I click on it, a new HTML page opens like product.html?product_id=id. I do not understand how to check for id or this part ?prodcut_id=id, and based on id it generates content for the page. Can anyone please link some guides or good solutions, I don't understand anything :(.

It sounds like you want the user's browser to ask the server to load a particular page based on the value of a variable called product_id.
The way a browser talks to a server is an HTTP Request, about which you can learn all the basics on javascipt.info and/or MDN.
The ?product_id=id is called the 'query' part of the URL, about which you can learn more on MDN and Wikipedia.
A request that gets a page with this kind of URL from the server is usually a GET request, which is simpler and requires less security than the more common and versatile POST request type.
You may notice some of the resources talking about AJAX requests (which are used to update part of the current page without reloading the whole thing), but you won't need to worry about this since you're just trying to have the browser navigate to a new page.
Your server needs to have some code to handle any such requests, basically saying:
"If anybody sends an HTTP GET request here, look at the value of the product_id variable and compare it to my available HTML files. If there's a match, send a response with the matching file, and if there's no match, send a page that says 'Error 404'."
That's the quick overview anyway. The resources will tell you much more about the details.

There are some solutions, how you can get the parameters from the url:
Get ID from URL with jQuery
It would also makes sense to understand what is a REST Api and how to build a own one, because i think you dont have a backend at the moment.
Here some refs:
https://www.conceptatech.com/blog/difference-front-end-back-end-development
https://www.tutorialspoint.com/nodejs/nodejs_restful_api.htm

Check the file type returned by an HTTP GET request

You would think my problem would be so commonplace that there would be solutions all over the internet for it. But I can't find anything that really answers my question.
Let me summarise my situation:
I am using Open UI5.
I am coding an app which retrieves documents from various external websites. I want to display these documents inside my app, and not navigate to them, so I display the documents in an iframe. Haven't found any other way.
Some filetypes can be displayed natively, such as PDFs. Others, like Word, cannot - the easiest way I have found of displaying these is by using Google Docs, which implies changing the URL of the iframe's src from this :
http://example.com/my-target-doc.docx
to this:
http://docs.google.com/gview?url=example.com/my-target-doc.docx&embedded=true
Some of the external domains I retrieve the documents from require authentication. Therefore, I cannot set the iframe's src to http://docs.google.com/gview?url=example.com/my-target-doc.docx&embedded=true directly - Google docs would attempt to display the authentication page. I must keep the original URL, and then, once the user's authenticated, replace the document URL with the Google docs version of the same URL.
What I am trying to do, then, is use the iframe's "onload" event to get the currently loaded page's address and, if it is a .doc/.docx/.ppt etc, replace that same URL with the GD version of the URL.
The difficulty is that there is no extension at the end of the URL which points to the document - none of the URLs I need to use end with ".doc", ".ppt" or whatever, so parsing the URL is out.
So this is my question : Is there a way in Javascript to get the type of the content being returned? To be fair, I am pretty doubtful there is. Other ideas or alternatives are welcome. I am still actively looking for some.
Thanks!

Did you already look at the Content-type HTTP header? This can be read with JS, but you probably have to request the file asynchronously for that.

Using DOMXpath to extract JSON data

I have used php simple html dom to no success on this issue.
Now I have gone to DOMDocument and DOMXpath and this does seem promising.
Here is my issue:
I am trying to scrape data from a page which is loaded via a web service request after the page initially shows. It is only milliseconds but because of this, normal scraping shows a template value as opposed to the actual data.
I have found the endpoint url using chrome developer network settings. So if I enter that url into the browser address bar the data displays nicely in JSON format. All Good.
My problem arises because any time the site is re-visited or the page refreshed, the suffix of the endpoint url is randomly-generated so I can't hard-code this url into my php file. For example the end of the url is "?=253648592" on first visit but on refresh it could be "?=375482910". The base of the url is static.
Without getting into headless browsers (I tried and MY head hurts!) is there a way to have Xpath find this random url when the page loads?
Sorry for being so long-winded but I wanted to explain as best I could.

It's probably much easier and faster to just use a regex if you only need one item/value from the HTML. I would like to give an example but therefor I would need a more extended snippet of how the HTML looks like that contains the endpoint that you want to fetch.
Is it possible to give a snippet of the HTML that contains the endpoint?

Modify href -or- URL Redirect / Rewrite and pattern matching using javascript or jquery

Im struggling to figure out the best way to redirect/rewrite urls with some pattern matching using javascript.
BACKGROUND:
I have a blog filtered by tag: http://adrtimesv6.squarespace.com/library/?tag=The+Psychology+%26+Neuroscience+of+Mediation (select view as visitor if that comes up)
I have another area in the site called "Collections" where i load in groups of posts from the library in its own real page with other content in a more controlled environment with page titles and urls that are better for seo, like this: http://adrtimesv6.squarespace.com/collections/the-psychology-and-neuroscience-of-mediation. the posts are loaded in via a query that pulls in posts from the library that have a tag that matches the name of the collection page. this is working pretty well. the problem im running into is that when someone filters the blog posts by tag i want them to be redirected to the collection page rather than go to the blog filter page.
QUESTION:
What im trying to figure out is how to use jquery to redirect all the /library/?tag=[path] urls to /collection/[path] urls. To do this i think i need to use jquery to:
1) swap "/libary/?tag=" to "/collections/"
2) revise the rest of the path from the tag formatted path "The+Psychology+%26+Neuroscience+of+Mediation" to my collection formatted path: "the-psychology-and-neuroscience-of-mediation"
ADDITIONAL INFORMATION:
I am using a CMS so i dont have access to things like the .htaccess file. in the CMS admin settings there is a url redirect panel that allows me to list some basic redirects in this format: -> ... but trying this with the tag filter urls is not working.
Im mostly concerned with this redirect occuring when the user clicks on the tags listed at the bottom of the blog post - so i could use jquery to modify the href attribute in the tag listed for the blog post. just not sure how to write the pattern matching and rewrite the format correctly. ive tried a bunch of things but cant seem to get it.
or perhaps use window.location.replace somehow?
UPDATE:
In my particular case, i found that i could update my template code and json formatters so that the tag link href generated matches the url in the collection section - so my problem is solved ....however, i still wonder how i would do handle this for other situations.
basically, 1) how to use javascript or jquery to check if the url (either href on the page or the browser url) contains something, then replace that with something else, and then modify the full url so that it is a simple dashed url .... takes out all + signs and replaces them with - and removes the %26 for & characters to return a simple url string, etc, like: /here-is-the-path

On a single page, you can use this to forward a visitor to a new page:
window.location = "http://www.google.com"
You could add logic to use the same script on every page. For example:
if ( document.location == "http://adrtimesv6.squarespace.com/library/?tag=The+Psychology+%26+Neuroscience+of+Mediation" ) {
window.location = "http://adrtimesv6.squarespace.com/collections/the-psychology-and-neuroscience-of-mediation"
}
and so on. You could even add more advance string manipulation to handle every URL.
But doing a JavaScript redirect in this manner will not have positive SEO effects such as friendly URLs. It will not enable your web server to handle the new URL; if http://adrtimesv6.squarespace.com/collections/the-psychology-and-neuroscience-of-mediation returns an error from your web server, no amount of front end JavaScript will be able to fix that.
Doing this with JavaScript this would probably be a negative experience for your users, because they would first have to download the page from the first URL, then execute the JavaScript, and then download the page from the new URL.

"Undefined" appearing sometimes in the URL of my ASP.NET application (somehow google related?)

Some users repeatedly run into a very mysterious problem when using my web application.
In the middle of using it, they'll click a button or link that takes them to another page, but there will be a "page not found" error, because the URL is something like:
http://www.correctwebsitename.com/undefined
I thought it might be a javascript bug in my app: a redirect done by choosing a page name (maybe with some parameters) where one of the values is bad, resulting in the page name = "undefined". But there is no such code in my app anywhere, and this happens on many different pages, seemingly at random.
The one thing that seems to make it happen more often is if the user logged in originally by clicking a link in an email message in gmail. But a user who cut and pasted the link URL into a browser window said it still happened. Googling around reveals some hints that some kind of Google redirecting or caching is happening behind the scenes.
Any ideas?
Edit:
I'm not getting responses from anyone familiar with how gmail links etc work, does anyone know what SO tags google experts "hang around in"?
Edit 2:
Awarding bounty to top answer for useful info and temporary workaround idea, but still interested in real solution to the problem, so not accepting workaround as solution.

I believe you are right about gmail doing something with the links. See the gmail image below:
Non-standard header fields are conventionally marked by prefixing the field name with X-
Its probably behaving like... oh well, Google, and inspecting everything.
To stop google search from tracking my clicks i had to create a userscript to rewrite one of their functions:
rwt = function(){};
Maybe you can try something similar for gmail.
What is rwt?
rwt() is a javascript function from google search that rewrites the links to track which site you have visited.
for example, searching for "greasemonkey" showed the mozilla addons page as the first result. clicking on it opened
https://www.google.com.br/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CCUQFjAA&url=https%3A%2F%2Faddons.mozilla.org%2Fpt-BR%2Ffirefox%2Faddon%2Fgreasemonkey%2F&ei=iWNtUIXjIoyQ8wTxv4DQAQ&usg=AFQjCNEO9EJcHp9rAmKyD_XZF2Bt6hs_YQ&sig2=P19xVUsD-Q1G_9AiUBP3PQ
and then redirected to
https://addons.mozilla.org/pt-BR/firefox/addon/greasemonkey/
The image above and the rwt() case is just to show you that there is a great chance that gmail is changing the links, so this could be related to your problem.
Since there is nothing you can do at gmail's side, maybe you could fix it on your server, by redirecting http://www.correctwebsitename.com/undefined to http://www.correctwebsitename.com or any other page that you'd like your users to see.
So, be it from gmail or any other referer, every time a client lands on http://www.correctwebsitename.com/undefined redirect him to another page.
so maybe I can figure out how to just send them back to the page they
came from
ASP
if not request.UrlReferrer is nothing then
response.redirect (request.UrlReferrer.tostring)
end if
JS (for this to work, you would have to actually create a page called undefined)
if (window.location.href.toLowerCase().indexOf('undefined') > -1) {
// this works
window.location.href = document.referrer;
// this works too (uncomment to enable)
// history.back();
}
remember that if the user directly typed the url or used the link from favorites there wont be no referrer

I would suggest you to check the below things in your application.
Is there any code in your application, apart from what you own ?
there can be injected code by third party applications, like for ex "AddThis" adds an extra #parameter to your url sometimes, in your case its clear that a javascript is trying to playaround with the location.href as "undefined" is something which many js developers will come across.
by adding an # will help do cross site communication, some bug might also be causing an issue here.
Do a complete search in your code for "location.href" and see if you have used it anywhere.
Sometimes third party addons on the browser too might cause this issue
hope these would help you narrow down to your problem.
if you are not able to trace out the issue anywhere, i would suggest you to override 404 functionality on your webserver and implement the solution using Referrer.