Hello everyone,
what would be the best way to do this?
I am loading a page which includes a link to another page. Before the page has finished loading, JavaScript has to read the link, extract a portion of the link and replace part of the URL of the currently-loading page. If this will work…
Please advise me on this.
Thank you very much in advance.
Sounds like a security issue, to me. Kind of the same reason many browsers stopped using the status line at the bottom… it can be used to trick people into thinking they are clicking on one link but it’s actually another. Do you mean to actually redirect the browser before the page is done loading???
Hi WolfShade,
Do you mean to actually redirect the browser before the page is done loading???
No, only part of the URL - the query string should change. This is due to some rather convoluted code I’ve come up with. I’m using a form with checkboxes to filter paginated query results. When the form has been submitted the URL remains the same, it is only after a pagination link has been clicked, that the next page’s URL contains the query string. So what I’m trying to do is get the query string from the link, so that the page that loads after form submission already has the query string in the URL.
So you’re just looking to append the query string of the current page to the links? In JavaScript, there’s document.URL that will give you the whole FQDN + script + query string. You can assign that to a variable, split the variable on “?”, then variable[1] would be everything after the question mark.
EDIT: This is probably best done server-side (CF, PHP, ASP, etc.), but it can be done in JS. If the links have a class or id, the href can be appended, easily.
So you’re just looking to append the query string of the current page to the links?
No, I’m trying to append a query string to the URL of the first page after form submission. This query string comes from a pagination link on the same first page. Though I have my doubts this will work.
AFAIK, I don’t think JS can manipulate the URL of a page that is already loaded.
Found the following on stackoverflow:
“Yes and no. All the common web browsers has a security measure to prevent that. The goal is to prevent people from creating replicas of websites, change the URL to make it look correct, and then be able to trick people and get their info.”
Thanks for your help WolfShade.
AFAIK, I don’t think JS can manipulate the URL of a page that is already loaded
I think JavaScript should be able to access the link before the page finishes loading, but of course I’m no JS guru. Perhaps Pullo will know that. As for security concerns I cannot really see any. If someone submits the form, they dont know if the same URL will load or if it will include a query string.
Hi RedBishop, how you doing?
So, if I understand this correctly, the user submits the form and displays the first page of the results. What you want is for that first page to include the page variable in the querystring, like results.php?page=1, is that right? And the form itself submits via GET or POST?
Hi RedBishop,
You could do it with history.pushState, but it’s a very messy solution.
It would be better to code it properly from the get go.
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newoffurl);
Hi RedBishop, how you doing?
Not too bad thanks, and yourself? Thank you for looking at this!
So, if I understand this correctly, the user submits the form and displays the first page of the results. What you want is for that first page to include the page variable in the querystring, like results.php?page=1, is that right? And the form itself submits via GET or POST?
Yes, that is my intention. The website works perfectly well without having the query string in the URL on the first page, but I might as well include it if possible. I am using POST to submit the form. I could validate the form and use header location to create the query string to use in the action=" ", but that will be difficult to achieve with my code. So I’d rather find another way to append the query string or just have no query string on the first page
@Pullo,
thank you. Do you think it would work with what I’m trying to do below?
A pagination link for the second page might be:
http://mypage.php?start=2&page=7&wine=merlot
So for the first page I most probably need an URL such as this:
http://mypage.php?start=0&page=7&wine=merlot
I’m thinking the JS needs to get all of the content after the first “&” ?
Thank you. Hope you are well.
I’m doing well thanks 
Can’t you just include the query string in your form action url, i.e results.php?page=1? As you’re submitting via POST, the query string should be kept intact on the results page.
Can’t you just include the query string in your form action url, i.e results.php?page=1?
No, I’m doing the validation and everything on the receiving page. Do you think what Pullo posted would work in this situation?
Thanks a lot!
Thinking about it, why not just have your form submit via GET, and include a hidden field for the page number? I’m assuming you want to pass all the form values in the URL for subsequent pages anyway?
The problem with a JS solution is that it breaks for users that don’t have JS enabled or whose browsers don’t support the pushState feature.
Thinking about it, why not just have your form submit via GET, and include a hidden field for the page number? I’m assuming you want to pass all the form values in the URL for subsequent pages anyway?
I’m not sure, as I said my setup is rather convoluted, so I’d hate to change it again.
The problem with a JS solution is that it breaks for users that don’t have JS enabled or whose browsers don’t support the pushState feature.
I don’t have a problem with that, it is only a “nice to have” feature. As long as it doesn’t cause any other “issues” for those browsers that have JS disabled or don’t support pushState, then I’d be willing to try it out. I don’t know if it has to be pushState, it can also be another feasible method.
Thanks
Place it within a try/catch and supply alternative code for browsers that don’t support pushState, so it will degrade gracefully.
Hey RedBishop,
I’m not all that sure what you’re trying to do, but here’s how you can manipulate the URL with pushState:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fruit and veg</title>
</head>
<body>
<form id="myForm" action="" method="post">
<input type="submit" value="submit">
</form>
<script>
var form = document.getElementById("myForm");
form.addEventListener("submit", function(){
localStorage.setItem("submitted", "true");
});
if(localStorage.getItem("submitted")){
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);
localStorage.removeItem("submitted");
}
</script>
</body>
</html>
The first time the form renders, it will display as normal.
When you submit the form, the event handler will set an item in local storage indicating it was submitted.
The form then submits to itself and once the page has loaded some JS check to see if the form was previously submitted.
If so, it alters the URL.
However …
This is hacky, messy and will cause you pain.
Please don’t use it, but take the time to design your app correctly in the first place.
There are enough people here who can guide you in that.
Hey Pullo,
I’m glad I caught you online. Thank you for the code although I’ll heed your warning.
As I mentioned my having the query string on the first page is only because some users might expect there to be one. All of my paginated “pages” have the query string in the URL. But if I’d make use of sessions then I’d in any way not have a query string in the URL? The most important thing is that the content displays what the user requested.
I think I’ll have to move on to other aspects of the website now, such as having 2 jQuery UI plugins on the same page, yet each has its on style.
Thanks for your help as always.
Place it within a try/catch and supply alternative code for browsers that don’t support pushState, so it will degrade gracefully.
Thanks.
In my opinion, using paginated and / or filterable result sets is one of those situations where you do want to have a query string in the URL. It gives your users several advantages:
Hey fretburner,
thanks, those are all valid points to have the query string in the URL. I managed to use the header location function and now the URL of the first page does have the query string albeit missing some things. Instead of &page=0&wine=merlot it now has &wine=merlot. I guess that better than nothing. Getting the other name/value pairs into the query string won’t be easy (for me at least) so I’ll leave it at that.