Posting without a target so that a web page reloads seems useful behaviour for some things - such as writing a login page. I have implemented a calendar in PHP which takes advantage of this. It reloads an object from the session (or creates a new one if not present), applying any changes that result from the post then saves the object back to the session. The problem is this. If I hit the back button I don't want to go back through every click of the calendar button but would rather jump back to the page before arriving at the calendar page. Not only that, if I do go back one calendar page after another I get an annoying "confirm form resubmission". I have implemented an incrementing value after the # for each post so that I might be able to use window.onhashchange. The problem is that window.onhashchange never fires so I am unable to intercept the back button and pop the history stack. Any ideas? Am I better off coding on the server side with javascript?
Well I solved one problem. My form subclass in PHP defaults to using POST as I understand this is more secure. This causes the annoying resubmission problem when using the back button. I now use GET in my calendar page which solves this issue. I am still bemused by JS debugging in Netbeans. I have never got script to stop on a breakpoint within a single document. I have previously had it working with an external javascript source but this no longer works. If I can output to console but there is no window in which to see the output. I am told window.alert no longer works for some events in Chrome. I am completely blind! To add to the irritation, it took me a while to realize was that the javascript file was cached and changes would not be reflected in behaviour. I have put a random number into the script tag which fixes this issue. As I am debugging using netbeans connector in Chrome I have no idea why this does not force the js file to refresh. All in all, this appears to be a pretty shambolic toolchain.
Related
I have an iframe in my react app that links to an external site where people can fill out a form to sign-up for service. On chrome and firefox this iframe works fine, if you fill out the form itll allow you to click next to move to the next set of form fields to fill out. however on Edge, ive noticed that no matter what you do, once you hit "next" to go to the next form field, it will breifly go to the next page, however it will "refresh" so to speak, and back up to the first form field. effectively keeping you from filling out required fields.
is there a way to ensure browser compatibility here? ill note that the external site uses a lot of JQuery script to perform its necessary functions. but it shouldnt be that as that code also has a script tag that imports the JQuery CDN so it should function correctly.
The iFrame tag needs a secured connection, Was using an http connection, the reason i could not move forward was because the page that was loaded needs a secured connection to move forward.
Ok so this is a general question about browser interaction and HTTP mechanims
Here is the scenario
There is a very rich interface with a lot of buttons.
The user clicks the button "generate the report"
Then there is a loading time of approximately 15 seconds and then the "save file" dialogue box appears
The user saves the files wherever he wishes and do further stuff.
Now I want to:
Prevent him from interacting with the interface during step 3.
At the end of step 3, trigger some specific javascript like showing a popup.
All this actually sums up to "how to detect the appearance of the download dialog box in javascript" because once this one is solved, this is easy to set up some mask during the file generation, and to do whatever is required once the event has been detected.
Unfortunately it seems like there is no way to launch a file download via Ajax because it lacks adequate handling for turning an XMLHttpRequest into a save as dialog box. As a consequence you need to submit some form, but the mechanism is a little weird because although you submitted the form absolutely nothing happens in the DOM. Then the browser detects that response to the form submission is an incoming file and shows a download box instead of trying to display the file content, and once the user is done with the download box, the browser somehow manage to restore the interface in its previous state so that the user can keep on browsing (or at least this is how I understand the thing).
Display a loading sign for x seconds, disable click events (see here) or replace them with a dialog saying they should stay quiet while it loads. Do not forget to make the loading sign moving/showing progress or they will get bored. I'm sure there are plenty of libraries to achieve this, you could even try using the <'progress'> tag. As #j3r3m7 said, if they want to close the browser they will; the goal here is to make user understand he has to wait for x seconds and make him eager to wait.
As for your other issue, please look here
EDIT : A helpful plugin to address these kinds of issues can be found here.
Interesting question as in essence you can't stop the user from doing anything really... they could if so inclinded:
close their browser
enter a url directly to go to a new page
click back in the browser
open a new browser window and navigate to the report generation page for a second time
refresh the page
So, if you have a long running process quite a good way to deal with it is:
indicate that the process may take a while
at the point that the report is ready provide a unique link to the generated report
if you are using a javascript framework like AngularJS you could asynchronously handle an event that shows a report download/view link when the report is ready.
I'm having a situation in which I want to allow the user to download a PDF. The generation of this PDF can take a couple of seconds, and I don't want a webserver thread to wait for the generation of the PDF, since that means the thread isn't available to handle other incoming requests.
So, what I would like to do is introduce the following URL patterns:
/request_download which invokes a background job to generate the PDF;
/document.pdf which will serve the PDF once it is generated
The use case is as follows.
A user clicks on 'Download PDF'. This invokes a piece of Javascript that'll show a spinner, make a request to /request_download and receive a HTTP 202 Accepted, indicating the request was accepted and a background job was created. The JS should then poll the /request_download url periodically until it gets HTTP 201 Created, indicating that the PDF has been created. A Location header is included that is used by the JS to forward the client to /document.pdf. This has to be in a new window (or tab, at least it shouldn't replace the current page). The level of expertise of our users is very low, so when I forward to the url, they might not know how to get back to the website.
The problem
Now, window.open works fine if it is invoked by the user via a click event. However, I want to invoke window.open in a callback function through setInterval as soon as I see that 201 Created response. However, browsers won't like that and will interpret it as a popup, causing it to get caught by popup blockers on IE8-10 as well as Chrome. Which makes sense.
I also can't open a new window and invoke the Javascript over there. In that case, users would see a blank page with a spinner. If that page then forwards to the /document.pdf, IE will show this yellow warning bar telling that it prevented files from being downloaded. Chrome and Firefox will do this without any problems, but a large percentage of our users is on IE.
What I've tried, and didn't work
window.open(location)
Setting the src of an iframe to the retrieve location
Manually adding an <a> tag to the document body and trying to click it using javascript
Adding an <a> tag to the document body and invoking a MouseEvent on it
Partially works: opening a new window on user click and storing a reference to it, then perform the asynchronous requests and upon completion, set the location of the earlier opened window. But: IE will block this and say it prevented files from being downloaded. So still not a fully working solution.
I'm straight out of ideas on how I can make this work and decided and decided to ask The Internet for help. I'm hoping you guys can help me with this, or recognise the problem. Thanks in advance!
This question is a follow-on to another question which needed asking and warranted a new post, so excuse me if I refer to things which may not be clear without reading the other question.
When using the utility waitForKeyElements() I'm facing an issue in which a div is included inside a small popup contained within the same URL. My extension is currently running on the Twitter site, and my intention is that a div contained on the profile pages (e.g. http://twitter.com/todayshow) gets moved above another div on the page. I'm doing this via waitForKeyElements() because of some loading issues which are resolved by using this utility.
However, on a profile page you can click a link to another users name which pops up a small window (inside the same window/tab, on the same URL) showing some info about them and a few previous tweets. The issue here is that the same div appears on this popup and is then moved to the main page behind the popup window, where it shouldn't be. On a profile page, this can be stopped by plugging in the false parameter to waitForKeyElements(), however on a non-profile page it is still possible to activate this popup which is then moving onto the main page, as the div I wish to move it above on a profile page still exists here, causing clear issues.
I'm wondering if there's a way around this, as bugs in Chrome have stopped me from excluding these pages. So far (just brainstorming) I'm thinking:
on a page where the div doesn't exist to begin with, create an empty one meaning false will handle the issue.
somehow stop the script from firing on a given URL, although due to the way Twitter works this would have to monitor OnClick() and the page URL (I think) which I'm unsure how to do.
stop running when the popup appears, but I have almost no idea where to start with that.
Any help is appreciated. Any necessary code related to this question can be found in the first two links, and the issue I'm facing can be seen by a quick visit to Twitter.
EDIT: When plugging in the false param it works when going directly to profiles via the URL bar, if you're on a profile and use a link to get to a profile, the script isn't inserted and my extension fails. So this would need resolving too, or an alternative method altogether.
I had a brainwave that I could use insertAfter() to insert the <div> I was originally moving in front of, after the <div> I was originally moving. This <div> is not present on the popup, which means that nothing is moved onto the back page when it shouldn't be.
In regards to the previous question, my code is now simply:
waitForKeyElements (
"jQuery selector for div(s) you want to move", // Opposite to what it was.
moveSelectDivs
);
function moveSelectDivs (jNode) {
jNode.insertAfter ("APPROPRIATE JQUERY SELECTOR"); // Again, the opposite.
}
This solves the issue I was having and my extension is now working just fine, however I will leave this question posted in case anybody comes back to it in future.
A website contains a "random" link, which loads a url that returns a 307 redirecting to the url we want. It works fine: click it and you load a random page. The problem is that each time you click it, the browser assumes you're loading the same page: so if you're on the homepage, then you follow the random link 5 times, then you press back, you'll be taken all the way back to the homepage, with no way to find the random pages you were just looking at. I want to modify this behavior so that users can access previous random pages via the back and forward buttons.
I don't own the website, so I can't just change the redirect code.
Here's what I've tried, all of which has failed.
Predicting what would be redirected to. While somewhat possible, there would be no way to avoid failure in up to .1% of clicks, and it would react very poorly to unexpected events, like a page that's published a day late, let alone a sit structure change.
Loading the 307 page via ajax. The request stops at readystate == 2 and I can't access the location header.
Cancel the click event and instead set location.href = random_link.href. This has no effect - the new page still doesn't go into history.
Have the new page call history.pushState. This successfully adds the page to history, but I can't find a way to distinguish between new pages and ones being opened via the back button, so the history quickly becomes very corrupted.
Keeping my own history in localStorage. As above, I can't tell when the back button is being used.
I'm working on a solution that I'm pretty sure will work, involving loading the page in an iframe over the existing page and using a background process and messaging to work around the fact that content injections from chrome extensions can't access window.parent from within iframes. And using the history API to reflect the current iframe's URL in the address bar, and get the back and forwards buttons to apply to the current iframe where appropriate.
While I'm pretty sure the last solution can be made to work, it's a hideously complex and heavyweight approach to what seems like a simple problem. So I thought I'd ask you guys before I continue: any other ideas?
Have you tried storing the locations in localStorage, then hi-jacking the back button ?
I am sure you know how localStorage works, for hi-jacking the back button you can refer to this : Is there a way to catch the back button event in javascript?
T.