I am making a simple web app that opens a url on entering a query. I am using the bottle framework in Python. The problem I am facing is as follows:
I have two URL handlers, one for / and other for /process. When the user enters a query through a form on /, the form action goes to /process which then processes the query and opens a particular url using window.open(url, "_self"). Now when the user hits the back button in the browser, /process is called again with the same query, which then again loads the same url. Instead of this, I want it to go / when the back button is pressed. How can I do this? Thanks.
EDIT : I did not notice this before but the above undesired behavior is found in Firefox but not in Chrome.
You can use the window.history object to manipulate and replace the history or, instead of using window.open(url, "_self"), replace the location
example:
window.location.replace(url);
Check some documentation and this answer
In Javascript, how do I "clear" the back (history -1)?
Another solution could be to intercept when the user is going to go back. Check this answer to have some examples:
Intercepting call to the back button in my AJAX application: I don't want it to do anything!
Don't redirect using window.open, or any kind of client-side JavaScript.
Have the HTTP response to the request for /process be a 302 Found HTTP status with a Location header.
See also The Post/Redirect/Get Pattern.
Related
Currently I have a page that when you fill out a text box and click a button, it redirects you to another page.
The page needs to be loaded, since it updates and shows xml. (I cannot currently change how this is)
However what I what to do is after page was redirected once, redirect it again or just load another page in general.
The thing to note about the xml link, is that part of it is created with the text box, so it will be dynamic.
I currently have something along the lines of this
//please note that username is a textbox, I've just left it out
<script runat = "server">
void Button_Click(Object sender, EventArgs e)
{
var url = "http://website.com/scripts/" + username.text "/value/0"
try
{
Response.Redirect(url, true);
}
catch(Exception ex)
{//From what I learnt, adding true to redirect throws an exception,
//which is how I tried executing another redirect, but it doesn't seem to
//to load the first direct, and skips straight to this, I also put this
//in finally, because it seemed more appropriate to no avail
Response.Redirect(someurl, true);
}
}
So I'm wondering if this is actually possible, I also wonder if I'm just looking up the wrong keywords to find a solution.
I've spent a bit of time on this, and have yet to come to some sort of solution, but I'm new to web development so I may just be missing some incredibly simple.
Also I only really understand how C# works in asp, but am willing to learn how to add in javascript or VB if necessary.
Thanks in advance for the help
Edit: Solution!
So I managed to use javascript to append the textbox value to the xml link, request it and without showing the user (showing the user, is not necessary in this case).
After which a popup confirms that it is successful then reloads the page.
it is very self explanatory but what I did was
url = "website";
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", url, true);
window.alert("success");
return true;//this reloads the page, that or just window.location.reload();
For an added check, I will see if I can verify that the username is a valid username, and popup with failure text if not.
You seem to have a misunderstanding about what Response.Redirect(...) actually does. The method name is, in my opinion, a bit misleading. It suggests that somehow the Response to the currently executing request will be sent somewhere else than the requesting browser. This is not the case. The name could as well have been Response.SendRedirectResponseToBrowser, because that's what Response.Redirect does.
So when you do Response.Redirect(url) you are telling the server that is executing your page that is should send a response to the browser, telling the browser to do a GET request of the supplied url. The browser will then do that, at which point that page needs to include a separate Redirect in order to further tell the browser where to go next.
In this case then, the page at "http://website.com/scripts/" + username.text "/value/0" needs to be patched up so that after processing the request, it will also send a redirect response with the url you want to display next.
If you have no control over that page, then you must solve this some other way. Some options:
Use ajax to request the "http://website.com/scripts/" + username.text "/value/0" url. Then after completion set the page location to the url you want to show next.
Open the http://website.com/.... url in a _blank target, then set to location to the next page.
Use System.Net.Http.HttpClient in your code behind method to request the http://website.com/.... url, then do a redirect. This means that the server requests the url as part of processing the button click.
Notes:
If the http://website.com/.... url updates some state (like store some changes in a database or similar), then you should request it using a POST request, not a GET. GET requests can get a cached response which means that the server might never actually see the request, and therefore not do any processing.
Piecing together the url like this "http://website.com/scripts/" + username.text "/value/0" looks risky. You should at the very minimum url encode the username.text - HttpUtility.UrlEncode(username.text). Better yet would be the first validate that the entered username is actually a valid user name.
You can add a Refresh header (not a meta-refresh element) to the response that contains the XML. In the header, you can specify another URL and the number of seconds to wait before redirecting.
I guess it should be using JavaScript (front-end) instead of back-end error handling, because it goes to another page. Use promise to handle exception
I have the link
http://www.example.com/mysite/administration/objects
I want to redirect to page
http://www.example.com/mysite/administration/reports
using jquery. But I don't want to write the direct link, only replace objects to reports I want something like this
window.location = './reports;
but I get
.../administration/objects/reports
EDIT
And what if I pass some id in request
http://www.example.com/mysite/administration/objects/33
I still want to get
http://www.example.com/mysite/administration/reports
If I use replace() I get the wrong url
http://www.example.com/mysite/administration/reports/33
just do 'reports' if it's in the same folder
window.location = 'reports';
jQuery is not necessary, and window.location.replace(...) will best simulate an HTTP redirect.
It is better than using window.location.href =, because replace() does not put the originating page in the session history, meaning the user won't get stuck in a never-ending back-button fiasco. If you want to simulate someone clicking on a link, use location.href. If you want to simulate an HTTP redirect, use location.replace.
For example:
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
what i need to do is, when the user clicks a certain div/image, to navigate to a different page. i use struts2 on backend.
so far, i have found 2 approaches, which produce the same effect (navigating to the other page):
create an s:url tag with my action. add the div an onclick attribute, with the url as the parameter. in the javascript function, call window.open(url)
create a form with the action. with jquery, call document.forms[].submit();
what i want to know is what is the difference between these two approaches. i am mostly interested in differences in terms of what happens inside struts, or in terms of dialog between browser and server, or what happens to the session
one difference (which i am not interested in) is that window.open also accepts parameters to open in a new window, and resize that window. i want to open the new action in the same window
a second difference (which is indeed more interesting) is that forms allow to use either POST or GET protocol. as for window.open, i am not sure which protocol is used
window.open opens a new window
window.location changes the location of the current page
forms[n].submit() submits the nth form to the server.
The window functions issue a GET request where you can add URL parameters if you need to send info to the server. There is a limitation to the number of characters you can send in a URL and it's usually not a good idea to send passwords in a GET request.
When you POST a form the parameters are in the message and not in the URL, thus they do not show up in the browser history nor are they affected by the url length limitation.
If your not sending data to the server for processing and you need to just navigate on an image click you should wrap it in an anchor tag
<img src=""/>
I know that I can find out the referrer using:
document.referrer;
However, I have a one page website, and a redirection set to send all other pages in that website to the home page. I would like to have a way of capturing the link that originated the redirection. In this case, document.referrer is always empty.
So I guess, I need to know:
How do I set a referrer parameter before the redirection?
How do I capture that parameter with JavaScript in the home page?
You could pass it along in a URL parameter. For example, Google does something similar when you click a search result; the browser actually goes to google.com/url?url=https%3A%2F%2Fthe-site-you-want.com.
So you could redirect your users to 'http://your-site.com/?referrer='+ encodeURIComponent(document.referrer), and then once it hits the homepage, you can extract that value and run decodeURIComponent.
encodeURIComponent is a method that makes a value safe to put in a URL. decodeURIComponent is the reverse process.
Alternatively, you could put it in a hash rather than the querystring, like 'http://your-site.com/#'+ encodeURIComponent(document.referrer). Several client-side routers use this. Although that may break the back button unless you spend more time learning about pushState. When Twitter first used twitter.com/#!/foo-bar as a URL scheme, it broke many things. But it may be useful to you.
I have an AJAX form that submits GET requests. Because these are all GET requests these should be easily bookmark-able. Preferably I'd make my Ajax request, update the screen and then update window.location.href to be the URL for the new page.
Unfortunately this reloads the page. Is there any way I can get around this? Basically I'd like the URL bar to be a permalink bar, but it needs to be able to change to keep up with the state of the page.
window.location.hash is no good because that doesn't get sent to the server.
window.history.replaceState( {} , title, new_URL );
This will update the current page URL with a new one without refreshing.
Arguments:
Data object (must be one that could be serialized to text)
The new title of the changed window URL
The URL to change to (without refreshing)
The you could use the window.onpopstate = function(event){...} to listen to events when a user goes back or forward in the browser history and change things however you wish.
The hash is the way to go. Because, as you point out, changes to the hash don't get sent to the server, you have to send an async request to the server as well as updating the hash.
As a simple example, if your URL is http://server.com/page?id=4, when the user triggers the action you send an AJAX request for http://server.com/page?id=4, and set the page URL to http://server.com/page#id=4.
Furthermore, you have to have something to restore the state if the user reloads. This would usually be done by reading the hash value client-side and sending an async request to the server based on the state represented by the hash value.
if you want to do which works in current browser, you can't change window.location.href without reloading the page
your only option is to to change window.location.hash.
you can do that each time you make an ajax call. if you're using jquery, you can bind a function which update the hash each time an ajax call is made.
if you choose that you'll have to look for the hash on page load (actually don't know/think you can do that server side) and make that call to have your page on the state corresponding to the hash.
-- update
there is now an API which provide this functionality look for history.pushState, history.replaceState and window.onpopstate : https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries
it's not availlable everywhere yet ( http://caniuse.com/#feat=history ), there is a few polyfill that you can use for the moment that will use this API if it's available and fall back using the url hash
Consider this JavaScript library: https://github.com/browserstate/history.js
Use jquery. It can do ajax requests. You cant use window.location because that is made to change the url.