Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ajax updated User Interfaces and the Back Button

Scenario:

  • A page is loaded with a complex UI on it.
  • User does some actions which alter data via Ajax callbacks, changes are reflected on the UI by DOM manipulation (e.g. via jQuery).
  • User clicks a link to go to another page (say a details page).
  • User clicks the back button to go back to the original UI page.
  • User sees out-of-date information - it looks like the changes he made (in step 2) never happened.

How do you deal with this situation?

like image 258
UpTheCreek Avatar asked May 25 '10 17:05

UpTheCreek


People also ask

How do I update a page using Ajax?

Use ajax for portions of the page that needs to update, not the entire thing. For that you should use templates. When you want to still preserve the back button for your various state changes on the page, combine them with # achors to alter the url (without forcing the browser to issue another GET).

What is the purpose of Ajax in a website?

This is the backbone of a navigable site that people can use. When you shovel all your functionality into AJAX calls and callbacks, you're basically forcing your users into a single path to access the features and content that they want -- which is totally against how the web is meant to function. People rely on the address bar and the back button.

Should I use Ajax to reload the header and navbar?

The hit for reloading the header and navbar is minimal compared to the hassle of breaking the browser's navigation UI. A more appropriate example of AJAX would be to allow users to play the game in the main window while they can browse through a list of other content in a nav pane.

Is Ajax the best solution for web page navigation?

AJAX is not the best solution for navigation for exactly the reason you describe. The hit for reloading the header and navbar is minimal compared to the hassle of breaking the browser's navigation UI.


3 Answers

Cookies. The only way to save information after the user leaves a page and comes back is with cookies.

Better way to do this is

0. user goes to your page 
1. A page is loaded with complex UI based on what is saved in the users cookies (default if no cookie)
2. user does some actions, which are saved into the cookie
3. user goes to another page
like image 71
user350162 Avatar answered Sep 24 '22 02:09

user350162


You could force the page to refresh when the back button is pressed which will then pull the updated data from the server.

<META http-equiv="Cache-Control" content="no-cache">
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Expires" content="-1">

you might also want to take a look at Real Simple History and see if you can take advantage of their techniques to utilize the Back button.

like image 28
Adam Avatar answered Sep 24 '22 02:09

Adam


Whatever data is passed to the next page would need to also be passed back to change the UI to the way it needs to be.

This could be done with cookies, or it could be done using post data/server side logic. Just pass the values to the second page, and when the user wants to come back just be sure to pass them back as well and alter the interface depending on the values. You could even use a session for this is you wanted, but I think that may be overkill if this is the only place you will need it.

Metropolis

like image 36
Metropolis Avatar answered Sep 26 '22 02:09

Metropolis