2

Ok so this is a general question about browser interaction and HTTP mechanims

Here is the scenario

  1. There is a very rich interface with a lot of buttons.
  2. The user clicks the button "generate the report"
  3. Then there is a loading time of approximately 15 seconds and then the "save file" dialogue box appears
  4. 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).

Aldian
  • 2,592
  • 2
  • 27
  • 39

2 Answers2

1

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.
j3r3m7
  • 742
  • 9
  • 21
  • They won't close the brower because they will lose their work. They can try to enter a direct url but it won't work in my application because it will break the workflow and generate an error page. They can click back, but they will get an expired view. They can't do the new browser thing because it will erase their current session, and since server state will have changed they won't be able to redownload, so they will have to redo everything. Finally if they refresh the page, this will most probably lead to an apache error page – Aldian Jul 04 '14 at 11:21
  • I am not using angular JS, but I would be interested to know how they manage to to that. Guess they are polling for seeing the server state and then assuming that once the file is ready on the server, the *save as* dialog box will appear pretty quickly? Actually I was already thinking about something like this, but some of my users have networking problems and I am not sure that even if the file is ready on the server side it will be available for download so fast – Aldian Jul 04 '14 at 11:26
  • Checking out the Angular source is very interesting, especially the dependency injection stuff. Looks like you have a fixed code base to work with so some sort of hand coded polling/iframe solution will work out best. The http://stackoverflow.com/questions/1106377/detect-when-browser-receives-file-download link from @lazertyuiopi does look hopefull. – j3r3m7 Jul 04 '14 at 12:33
1

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.

Community
  • 1
  • 1
IazertyuiopI
  • 488
  • 2
  • 12
  • Your suggestion lead me there, which seems to be exactly what I was looking for. http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/ If you add it to your answer, I will accept it ;) – Aldian Jul 04 '14 at 11:59
  • Well, not sure how I helped, but at least this will give visibility to the plugin =) – IazertyuiopI Jul 04 '14 at 12:13
  • from your "please look here link" I read the whole page and got to http://stackoverflow.com/a/12526953/720297 Thanks for your help (plus I like azerty keyboards) – Aldian Jul 04 '14 at 12:16
  • For anybody coming later: At last I did not use the plugin because of compatibility problems. But I simply used an ajax call to have the server prepare the file, and once it is ready, launch the download by appending `""` as a child element in the form. – Aldian Jul 08 '14 at 15:29