views:

269

answers:

3

I know this in old issue but I can't figure out the best practices for dealing with the back button.

I'm writing a web application with lots of data movement between the browser and the backend server. I currently use post and of course when the user bypasses the application navigation and uses the back button both IE and Firefox popup messages asking the user if they want to resend the data.

I tried "get" and aside from all the data being displayed within the URL, IE8 still generates a message.

Additionally I can't really identify when the post causes a message and when it doesn't, since I have test cases posting data where the back button does not cause a message.

My environment is JavaScript, PHP and MySQL.

Any help or pointer to a research location is greatly appreciated.

Edited:

I wrote 3 little pages to test posting a->b->c->a and they don't cause any postdata messages. I don't know why:

A

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test post A</title>
</head>
<body>  
<h1>testPostA.php</h1>
<h3>Came from <?php print (isset($_POST['data'])?$_POST['data']:"NoWhere"); ?></h3>
<form action="testPostB.php" method="post">
    <input name="data" type="text" value="from testPostA.php" />
    <input type="Submit" value="Submit To: testPostB.php" />
</form>
</body>
</html>

B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test post B</title>
</head>
<body>  
<h1>testPostB.php</h1>
<h3>Came from <?php print (isset($_POST['data'])?$_POST['data']:"No where"); ?></h3>
<form action="testPostC.php" method="post">
    <input name="data" type="text" value="from testPostB.php" />
    <input type="Submit" value="Submit To: testPostC.php" />
</form>
</body>
</html>

C

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test post C</title>
</head>
<body>  
<h1>testPostC.php</h1>
<h3>Came from <?php print (isset($_POST['data'])?$_POST['data']:"No where"); ?></h3>
<form action="testPostA.php" method="post">
    <input name="data" type="text" value="from testPostC.php" />
    <input type="Submit" value="Submit To: testPostA.php" />
</form>
</body>
</html>
+3  A: 

You could use ajax to post your data, then when the response comes back, redirect them to whatever page you'd like.

Zoidberg
+5  A: 

The Post/Redirect/Get pattern will prevent the re-POST warning. However, you still have to take care that your application can handle/reject duplicate form submissions and the like.

Edit 1

For an application that's heavy on Javascript, I've also seen some design patterns that leverage the browser history and fragment identifiers to provide a more seamless integration with the back button, bookmarking, etc.

Edit 2

Regarding the addendum to your question, it's hard to say. It could be that the in some cases the browser has the page cached and doesn't need to resubmit the POST to render the page again. You could play around with various ways of disabling browser caching on these requests to see if you can make the behavior more predictable (i.e. always cause the resubmit warning). At any rate, I think web applications that follow the Post/Redirect/Get pattern are slightly more user-friendly, but your mileage may vary.

Another thing to keep in mind is that you can use method="get" on forms that are performing queries, generating reports, etc. Sometimes GET is a better option in those read-only scenarios because it makes your URL scheme richer and avoids these sort of POST warnings.

Joe Holloway
+2  A: 

The user prompt to re-submit data is displayed when the page that they are trying to navigate to was first navigated to from a POST form submission. If you do any sort of AJAX POST'ing, the re-submit prompt will not be displayed if the user navigates back or forward to it.

To avoid ever getting this prompt, you could just use AJAX, or POST and then redirect. However, this is the behavior of a great many web applications (Amazon's cart, for example). I'm not fully aware of the context or behavior of your application, but I'm not fully convinced that this is a problem that you need to worry about, especially if you're not allowing duplicate data.

Justin Johnson
I wrote 3 pages that post to each other with no back issues - why?this is the first:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head></head><body> <h1>testPostA.php</h1><h3>Came from <?php print (isset($_POST['data'])?$_POST['data']:"NoWhere"); ?></h3><form action="testPostB.php" method="post"> <input name="data" type="text" value="from testPostA.php" /> <input type="Submit" value="Submit To: testPostB.php" /></form></body></html>
sdfor
You might want to add that to your question, or perhaps start a new question
Joe Holloway
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>test post B</title></head><body> <h1>testPostB.php</h1><h3>Came from <?php print (isset($_POST['data'])?$_POST['data']:"No where"); ?></h3><form action="testPostC.php" method="post"> <input name="data" type="text" value="from testPostB.php" /> <input type="Submit" value="Submit To: testPostC.php" /></form></body></html>
sdfor
I edited the original question and added the html, but, for some reason, it's showing the result of the page and not the code
sdfor
@sdfor For question and answer text, you can use Markdown syntax. Code must be indented with 4 spaces to get the stylizer to kick in. There's a toolbar button in the editor (look for 1s and 0s) that lets you highlight a piece of code and indent appropriately. I fixed it for you on this one.
Joe Holloway