Develop Reference

How to hide a transient web page once it's been used?

I have the following situation
Home Page -- User clicks a link, which directs them to a JS-generated page, which may be time intensive
JS-page does some work and may display a "timer" saying work will be done in X seconds, and redirects user to a PDF
PDF page is shown to the user
Problem:
Once the user is done with PDF, they click "Back" button on the browser, hoping to go back to Home Page, but instead they go to JS page, as that's how browsers work -- they step back once. Naturally that displays the timer again and redirects users right back to PDF.
How do I structure my software so that when users are done with PDF, clicking Back (or some other simple way) takes them back to the Home Page?
Simple work-around is for users to click back twice in quick succession, but that's kind of inconvenient - breaks usability of this particular piece for the users and I don't want to do that.
EDIT For Code:
PHP side:
case "export-to-pdf":
$printpdf->generateCanvasInBrowser();
break;
HTML/JS side:
public function generateCanvasInBrowser()
{
//generate form with data
//submit form to PHP script
document.forms['form'].submit();
}
PHP-side:
//Takes and processes POST-ed data from form, and generates PDF
<?
echo printPDF();
EDIT For solution try:
I did a modal dialog with Java Script (https://stackoverflow.com/a/15582060/2883328), and now JS page shows up in an overlay div, but then also does the PDF. It shows up in the dialog box, not in the main browser. It looks fair enough, but still breaks expected functionality for the user as they are used to clicking back from PDF to home page. With this one I'll need to find a way to submit the form AND get out of the modal box.

(moving over from my comment, which seemed to fix the problem mostly)
The best way to fix this is to display the countdown on the home page itself. That would avoid the problem altogether, because then you wouldn't load any page in between. If you use a modal, for example, which contains the js-generated page, then you will need to make sure to submit the form to the top page. You can do that by adding target="_top" to your <form> tag.
I hope this works for you.

Generate the JS Page INSIDE A DIV in the Home page and work widh "visibility: collapse" to show or hide .if you use JQuery use ("#div").hide() and .show()
That should be a lot easier and solve your problem

What is the proper way of preventing user interaction while downloading a file?

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.

Hijack Back Button? [duplicate]

I am trying a new functionality for my web site. I want to do simple navigation by hiding/showing <div> elements.
For example, when a user clicks a "details" button on some product, I want to hide the main <div> and show the <div> containing the details for the product.
The problem is that to go back to the previous "page", I have to undo all the display/visibility style changes, which is ok if the user clicks the "close" button in the newly opened <div>. But most users will hit the BACK button.
Is there a way to make the BACK button go back to the previous "state" of the page i.e., undo the visibility/display changes?
Thanks.

Yes. What you're looking for is called AJAX browser history.
There are a few open implementations out there, like RSH as well as plugins/modules for frameworks like jQuery and YUI.

to answer the question of your title (that's what I was looking for)
Using the BACK button to revert to the previous state of the page
and from the link from #reach4thelasers's answer, you have to set up a timer and check again and again the current anchor:
//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
setInterval("checkAnchor()", 300);
});
because there's no Javascript callback triggered when the BACK button is pressed and only the anchor is changed ...
--
by the way, the pattern you're talking about is now known as Single Page Interface !

You need to add an anchor to the URL whenever a change is made
www.site.com/page.html#anchor1
This will allow the browser to maintain the pages in its history. I implemented it in my current site after following this tutorial, which works great and gives you a good understanding of what you need to do:
http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
Your example in the comments won't work, because it works like this:
Page Loaded
Page Changed, Add Anchor to URL (back button takes you back to back to 1)
Page Changed, Anchor Changed (back button button takes you back to 2)
Page Changed, Anchor Changed (back button button takes you back to 3)
.... and so on and so on..

If there is, it sounds like a pretty evil thing to do from a UX perspective. Why don't you design a "back" button into your application, and use design to make it obvious to the user that they should use your application's back button instead of the browser.
By "use design," I mean make your application look like a self-sufficient user interface inside of the browser, so the user's eye stays within your page, and not up on the browser chrome, when they are looking for controls to interact with your app.

You can do this with anchors, which is how it's done in a lot of flash applications, or other apps that don't go from page to page. Facebook uses this technique pretty liberally. Each time the user clicks on a link that should go in their history, change the anchor on the page.
So say my home page link is:
http://www.mysite.com/#homepage
For the link that works your javascript magic, do this:
My Other Page
This will send the user to http://www.mysite.com/#otherpage where clicking the back button will go back to http://www.mysite.com/#homepage. Then you just have to read the anchors with
window.location.hash
to figure out which page you're supposed to be on.

Take a look to this tutorial based on ItsNat a Java web framework focused on Single Page Interface web sites

How can I make my Live Feed list update only on the active tab or update it when the tab becomes active again?

I have a Live Feed jQuery box which updates in every 10 seconds, and puts the sites latest comments on top. This is working fine: jQuery makes an Ajax request, calls a PHP, which returns new items or none.
This box is like a sidebar, it is on every page on my site. My problem is that if a user opens many pages on the site, every tab he opened will do this auto-refresh until he closes that tab. So with a few dozen users each opening many pages this becomes a problem, even if the Live Feed is well optimized, and the SQL query behind it is fast (0.0005 seconds per query). Also if the user leaves the browser open with a couple of opened tabs, and start browsing somewhere else, or watch a movie they'll update forever, or until he closes them.
So what is a nice solution for this? Can I make my feed update only if its tab/window is visible/active? Is there an event which will fire if it was inactive and now active again?

Try adding onFocus event on the window object to trigger your updates and add onBlur to stop updating your live feeds.
Since you are using jquery you can do this
$(window).('focus',function(){
//do updates
})
$(window).('blur',function(){
//stop updates
})

Use Javascript Alert To Keep Users On A Page

I am creating an internal web based application that will not be the target audience of the web.
I understand the frustration of alert boxes and forcing people to do certain things.
With that said, what I am attempting to do is create a javascript function, that unless a user clicks a link on a specific page, if they try to navigate away from the page other than using a link on the page, I would like to alert them and say, sorry you need to click the appropriate link to exit.
What my issue is, is that I need to lock out fields, and what I can do when a user hits an edit page, im going to write to a table that user to the lockoutuser colum. If a value exist, that user can access the record if it is null, it means no one is editing the record. If someone clicks to go into that record they lock it out, my means of updating the lockoutuser colum could be ajaxy on unload of the page, but the page could be unloaded for 2 reasons, 1 the edit form is submitted or the user leaves the page.
An alert that would say, sorry you can leave this record without clicking the big red button that says unlock, and force the user without refreshing to stay on the page.
I understand the machine could crash and or an alt f4 or a brute end task on the browser will still leave me other work to unlock the record

You need to use the onunload event of the page to present a messagebox when the user tries to leave your page. Check out this example: http://www.codetoad.com/javascript/miscellaneous/onunload_event_eg.asp