We Keep Coding

How to pass values from one web page to another

I am new to web development and there is something I'm very use to doing in mobile dev and I wanted to know if it is applicable to web development(Html, CSS & Javascript).
It is basically code reuseability, but in this case I want to pass the data(String) I get from a database to another web page where I act on those data.
I would like to implement It with a single web page whose job is to load the data e.g a web page that shows user profile or a web page that show chat history of 2 users.
I really hope you understood what I was trying to say, I honestly suck at type explaining.
Thanks guys.
A code example of what I'm trying to implement.
example language Flutter(dart).
...
final string userId;
const ShowUserProfile(this.userId);
....
Text('Welcome ${widget.userId} to your profile screen', style: ....);
....

If you want to pass data from one page to another using only HTML, and JS (client-side) code and not use any server-side code you can accomplish this in two ways:
1) Store data in the URL. Example:
HTML
some link
JS
const data = 'abc';
const link = document.getElementByID('mylink');
link.href += '?data='+ data;
this method is detailed in another question here How to store data as a url parameter using javascript?
2) The preferred method is to store the data as a cookie in the user's browser because this method does not pass the data over the network. Example:
JS
document.cookie = "data=abc";

Two methods, one is the data can be part of the http link such as https://yourwebsite/iampage/thisisthevalue. But this method is so messy and your users will see the value and also spaces are replaced with %20....
Method 2 is using localStorage or session or indexedDB. Easiest is localStorage. More information on localStorage can be found in this link https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage.

You can also make a separate css document with all the code and then go like this:
<source src="name.css" type="text/css">
Then you can get the same CSS document on 2 diffrent pages

Change url based on the clicked link (Javascript html)

I'm having a problem, or better to say a doubt about how to do.
Let's explain: I have an website similar to a blog where I write articles and they are displayed in the homepage. I want that every time I click on an article it redirects me to the page where the article's content is shown. I save every article in a database with the title, date, content, etc... My doubt is: should I create a .html file for each article or only a file called "article.php" and when I open it, it changes the content getting the data from the database?
Second question: I want that the url of the page changes based of article that I click. For example I click on the article called "Today and Tomorrow", I want that the URL appears as "mysite/today-and-tomorrow/", not "mysite/article.php".
I'm a bit confused about this topic so if anyone can help me i'd be very happy.
Thanks in advice.
I have tried
var link = 'www.example.com/training/product.html';
link.split('.html')[0];
window.history.replaceState( null, null, link );
But it changes the URL dinamically, so for a few seconds it appears the original URL, in my case it appears "mysite/article.php" and then it changes in "mysite/today-and-tomorrow". I don't think it's properly correct.
I also tried
function openArticle(title){
var rightTitle = $(title).text();
rightTitle = rightTitle.toLowerCase();
rightTitle = rightTitle.substring(rightTitle .indexOf(':')+2);
rightTitle = rightTitle.replace(/[^A-Z0-9]+/ig, "-");
event.preventDefault();
window.location.href = title.href + "/" + rightTitle;
}
But when I click on the element the "article.php" remains in the url

should I create a .html file for each article or only a file called "article.php" and when I open it, it changes the content getting the data from the database?
No you dont have to. You can pass article id as a "query string" to "article.php" and it will take care of providing proper article to the end user.
I want that the url of the page changes based of article that I click. For example I click on the article called "Today and Tomorrow", I want that the URL appears as "mysite/today-and-tomorrow/", not "mysite/article.php".
You are talking about a feature called "URL Rewriting" which produces nice & meaningful URLs. In order to implement it you need to:
Design your database in a way which it can map articles id to its title.(for creating alias)
You have to enable URL Rewrite in your web server. (for example if you are using Apache as web server, you need to enable mod_rewrite).
You have to embed your rules for mapping & routing nice URLs to the original ones in a file called .htaccess. as a sample How to write htaccess rewrite rule for seo friendly url
I was just trying to help you get an overall idea of what you are looking for from technical point of view & as you know Its impossible to cover your required information in just a single post.

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.

Hide the url in a Grails application

Is there a way to hide the url in the address bar with Grails application. Now users of the web application can see and change the request parameter values from the address bar and they see the record id in the show page.
Is there a way in Javascript or Groovy (URL Mapping) or Grails (.gsp) or HTML or Tomcat (server.xml or conf.xml or in web.xml inside application in the webapps)
ex(http://www.example.com/hide/show /) i want to avoid this url and always see (http://www.example.com) or (http://www.example.com/hide/show) without the record id
Is there a way to prevent this?

No, most browsers doesn't let you hide the address field, even if you open a new window using window.open. This is a security feature, so that one site can't easily pretend to be another.
Your application should have security checks so that one user can't access data that only another user should see. Just hiding the URL would not be safe anyway, you can easily get around that using tools built into the browser, or readily available addons.

It's part of the restful URL pattern implemented by grails.
Your best bet to hide the URL would be using an iframe within the page you want the user to see in their address bar.

Not quite sure what you mean, but I would change the default root URL mapping in UrlMappings.groovy so it looks a bit like this:
static mappings = {
"/$controller/$action?/$id?"{
constraints {
// apply constraints here
}
}
//Change it here!!!!
"/"(controller: 'controllerName', action: 'actionName')
Where 'actionName' and 'controllerName' are what you want them to be - 'hide', 'show' in your example?
Than pass all parameters via a post instead of a get, just change the <g:form> method.
You will still obviously need to implement any security checking required in the controller as stated by other posters.
Thanks,
Jim.

You can probably handle this using a variation of Post/Redirect/Get:
http://en.wikipedia.org/wiki/Post/Redirect/Get
At our Grails site we have a lot of search fields. When a user clicked a pagination link all those search fields ended up in the URL which created ugly URL:s with a higher risk that users bookmarked those addresses which could mean future problems.
We solved this by saving not only all POST but also GET with parameters into the session, redirect to GET without parameters and append those again in the controller. This not only creates nice URL:s but also a memory so that if a user goes back to an earlier menu, then selected details within that menu are redisplayed.
For your specific request to hide the id in "show/42" you can probably handle that likewise or possibly configure Grails to use "show?id=42" instead, but we don't have that requirement so I haven't looked further into that issue. Good luck!
Forgot to mention: this won't add much to security since links will still contain ids, it will only clean up the address bar.
Here's some sample code that should work. If show?id=42 is called, it saves id=42 in the session, then redirects to just show and id=42 is added to params before further processing. It does what you want, but as commented it might not always be a wise thing to do.
def show = {
if (request.method == 'GET' && !request.queryString) {
if (session[controllerName]) {
params.putAll(session[controllerName])
// Add the typical code for show here...
}
} else {
session[controllerName] = extractParams(params)
redirect(action: 'show')
return
}

Ajax - maintaining state in the url - no #

I am working on an AJAX website where there are two search parameters. I did some mod-rewrite and checking for $_GET variables so that i can do something like..
site.com/var1/var2/ -> automatically do the search based on the parameters.
Now what I want is for people who do the search manually, to be able to have the url in that format. The only method that I've been able to find has to do w/modifying the url using..
location.hash = 'foo';
which would make it something like.. site.com/#var1
Which isn't as nice as the mod-rewrite. What I have found that works is if in my search function that does the ajax call i have this code
// avoid appending further variables if there are already variables
if(location.href == 'some absolute website path')
location.href = var1+'/'+var2+'/';
This will work, but basically forces the page load and then my auto search php/javascript will kick in due to the mod-rewrite. SO this works, however it involves an extra page refresh that I would rather avoid.
Any better solutions out there? Ideally if i was able to use location.href where it didn't cause the page to load once i change the value, but would just change in the url would be ideal (while maintaining my mod-rewrite links, w/out the # marks).
I am using jquery and php.

It's that way by design, there is no way yo change the url or path without causing a new request. Regards.