The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

Handling Refresh F5 in Ajax Apps

Hi,

Has anyone had any experience of handling browser refresh in the middle of an Ajax app? I've just noticed that all previous selections etc revert back to as they were at the start when this happens!

Kieran
Kieran
Monday, June 26, 2006
 
 
The best thing to do is design your application such that it doesn't care what state it's in. This means...

1) making sure the user doesn't enter a LOT of data between refreshes,

2) and making sure that the application understands what to do based on the data available.

For example, let's say I coded a notpad style word processor. Ideally, I should send data back to the server every time I hit the enter key (for the purposes of this discussion).  If I ever hit the back button, the application figures out based on the session id, that I was working on this document and it should load all previously saved paragraphs and put the cursor at the end. At most, I loose one statement (or paragraph).

If you cannot structure your application to fail gracefully, then AJAX may be the wrong technology for you. (What happens if the network goes down?)
TheDavid
Monday, June 26, 2006
 
 
"Has anyone had any experience of handling browser refresh in the middle of an Ajax app?"

Yes, handle the "onbeforeunload" body event.  This event will fire whenever a user hits refresh, closes the window, or navigates away from your page.  You can use it to return a message to the user and allow them to cancel the operation. 

This event is EXTREMELY useful for preventing data loss in both regular and Ajax web applications.
Almost H. Anonymous Send private email
Monday, June 26, 2006
 
 
"Yes, handle the "onbeforeunload" body event."

I think you mean "onunload" there.
John Topley Send private email
Tuesday, June 27, 2006
 
 
If ajax calls for a php page, you can store the changes in $_SESSION. When the page loads, you can check if there is a $_SESSION version instead of the default one.
warnew Send private email
Tuesday, June 27, 2006
 
 
No, it's "onbeforeunload" alright. "Onunload" is called at a later phase and can't be used to cancel leaving the page.

window.onbeforeunload = function() {
  return 'You have unsaved changes. You will lose them if you continue.';
}

I don't like how it overloads the meaning of return value in event handlers, but the provided functionality is great.
Aapo Laitinen Send private email
Tuesday, June 27, 2006
 
 
"onbeforeunload" is a Microsoft proprietary event.
John Topley Send private email
Tuesday, June 27, 2006
 
 
No it's not!!!
Almost H. Anonymous Send private email
Tuesday, June 27, 2006
 
 
And XMLHttpRequest is a Microsoft proprietary object...
SomeBody Send private email
Tuesday, June 27, 2006
 
 
Yes it is! -

http://www.w3.org/TR/DOM-Level-2-Events/events.html
http://en.wikipedia.org/wiki/DOM_Events#Microsoft-specific_events

XMLHTTPRequest was invented by Microsoft but is implemented in Mozilla and Safari as a native object, therefore it's not proprietary.
John Topley Send private email
Tuesday, June 27, 2006
 
 
Onbeforeunload was invented by Microsoft but is implemented in Mozilla as a native event, therefore it's not proprietary.

It seems support for onbeforeunload is still pretty hard to come by (not supported in Safari or Opera) but I suspect that will change quickly.  Supporting IE and all Mozilla-based browsers is generally enough for something like this.
Almost H. Anonymous Send private email
Tuesday, June 27, 2006
 
 
I apologize - I didn't realise that Mozilla implement onbeforeunload too. However, as I'm typing this on a Mac, I think Safari support is pretty important! ;-)
John Topley Send private email
Tuesday, June 27, 2006
 
 
Well, I knew I was right because I have application that uses that event!  You shouldn't trust old online documentation.

Unfortunately, Safari renders my site like hell anyway so I'm not terribly concerned.  I can just point Mac users to Firefox.
Almost H. Anonymous Send private email
Tuesday, June 27, 2006
 
 
Fair enough, but I wouldn't regard the W3C docs as old online documentation. They may not reflect the reality of current implementations but they're still supposed to be the baseline that you should work against.
John Topley Send private email
Tuesday, June 27, 2006
 
 
If you're a web developer that's not really the first place to look -- ugly, hard to follow, and designed more for people building web browsers than people building web sites.

There doesn't seem to be *any* single reference of HTML/DOM/Javascript that covers all current features of all browsers.
Almost H. Anonymous Send private email
Tuesday, June 27, 2006
 
 
I think I remember noticing onbeforeunload in one of the Opera 9 changelogs...
G Jones
Tuesday, June 27, 2006
 
 
AHA

http://www.quirksmode.org/ is pretty good at showing browser compat levels
... Send private email
Wednesday, June 28, 2006
 
 
It seems that looking after the browser history and ensuring the back/forward buttons remain in the browser in Ajax apps is a common problem.

Has anyone done any work with handling these problems?

Kieran
Kieran
Wednesday, June 28, 2006
 
 
Actually, Safari 2.0 supports onbeforeunload but there are two gotchas:

1) You must use "return" instead of setting "event.returnValue".

2) If you click the back button, answer Cancel to the onbeforeunload question, click back again and answer OK, you'll go back two steps instead of one.

Problem #2 has already been fixed in the WebKit nightlies and the fix will probably ship with the next Safari release.
Aapo Laitinen Send private email
Wednesday, June 28, 2006
 
 

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
 
Powered by FogBugz