I have added AJAX to a client's site to enable some simple animation of page transitions. So if we navigate to his homepage (with js enabled) at firedogcreative.com and then navigate to his edit page, and then to one of his work pages; we end up with a history something like this:
firedogcreative.com --> firedogcreative.com/#edit --> firedogcreative.com/#example1
Ajax takes care of loading the content of each of those pages in, it updates the hash in the URL bar in each case, and all works exactly as planned.
When a user clicks the back button, though, I'm not sure I understand what is happening. If they are at #example1 and hit the browser's back button, the URL bar updates to firedogcreative.com/#edit, but the page content doesn't change. If the user then reloads the page, though, it correctly reloads to #edit.
I tried adding this, which I thought would cause the pages not to cache and thus each back button call would reload the page, but it didn't seem to have an effect:
window.onbeforeunload = function () {
// stuff do do before the window is unloaded here.
};
If that worked, it would be a passable solution. The page would only ever ACTUALLY reload when the user uses the forward/back buttons, which would be fine.
So my question is, what is going on with the back button? Shouldn't onbeforeunload be causing the backbutton to reload based on the stored URL?
So my question is, what is going on with the back button?
It is going back to the previous URL.
Since changing the fragment identifier to track application state is a hack, nothing else happens.
Shouldn't onbeforeunload be causing the backbutton to reload based on the stored URL?
No. You are navigating back within the same document, so it isn't being unloaded.
You need to monitor the hashchange event and change the application state with your own JS.
Alternatively, switch to using pushState and watch the popstate event.
Related
I have a single page app in which the page is never unloaded. I am using the # in the url and using javascript to detect the hashchange and then updating the UI using JS and AJAX... and I do not want the forward and back buttons to make an extra request to the server.
Currently, the first time the user initially comes to the site, a server request is made (which is OK)
Processing by MyController#index as HTML
My goal is for this server request to only happen once during the users time at the site...every time they click on any other link, I just use the "#" in the url to prevent a new server request... so all my "a" tags look like something like this
<a href="#page1/
The issue I am having is that clicking the back and forward button triggers my JS hashchange listener (which is what I want)... but it also calls
Processing by MyController#index as HTML //I DO NOT WANT THIS TO HAPPEN
Here is the functionality I am currently getting
1.) user navigates to mydomain.com
2.) "Processing by MyController#index as HTML" is launched and a server request is made (THIS IS OK)
3.) User clicks a link and now the url reads mydomain.com/#page1 and I update the view with JS (THIS IS OK)
4.) User clicks a link and now the url reads mydomain.com/#page2 and I update the view with JS (THIS IS OK)
5.) User clicks BACK and now the url reads mydomain.com/#page1 and I update the view with JS (THIS IS OK)
6.) a server request is AUTOMATICALLY made to reload the page ("Processing by MyController#index as HTML" is called again) (THIS IS NOT OK)
How do I prevent step 6 from occuring when the user clicks the back button??... I just want the url to change and for me to update my UI via JS and no server request
Also, I am using ruby on rails if this helps at all.
What you're trying to do is impossible. You can't override the default behavior of browser buttons like back/forward/stop/refresh, etc.
What you could do is create your own Back and Forward buttons (and place them on the actual page, itself) - and code their event handlers accordingly to make your AJAX calls.
This work fine for me
jQuery hashchange event
Finally got it figured it out. For some reason, Turbolinks was causing it to reload the page whenever the back or forward button were clicked. I removed the Turbolinks gem from the app and now its all working perfect.
I'm using jQuery Mobile (no php or xml or anything else) for a web application running on cherrypy and i would like to find out how can i keep the page as it has been set by user even after refreshing.
As an example of the page, see this fiddle: http://jsfiddle.net/xaKXM/5/
in this example, user may input certain text in Response number and description. When the user click submit,user will see #configtable div. if the page is refreshed, user will not go back to the initial page (#labels div' )but to remain in the#configtable` (the one that user can't input anything but can only click activate button")
May be there is a button that would clear all those states and the page will go back to default when refresh?
Is this possible to be done?
if you refresh the DOM using window.open('index.html'); this should clear everything in the page
I have a page where navigation is handled by hiding and showing preloaded divs when users click on links. But, the users think they've actually changed pages, so they click on their browser's "back" button trying to go back to the div that was previously hidden. But of course, they go back to the page from which they came.
What's the best way to handle this? 90% of the traffic is from a login page. Should I just sandwich a redirect page in between the two? How is this done? Can I just change the browser's back button behavior?
If you are already using jQuery, why not simply add a history manager like jq-bbq or the hashchange or history manager? (Or, if you want to really go all out, switch to a MVC JavaScript framework like Sammy.) That way, the back button will work as the user expects, rather than hacking around their expectations by blocking the back button or throwing in redirects. (Unless you have a good reason to, of course :-) )
If you use a browser history plugin like the jQuery UI one you end up changing the history so that the back button doesn't actually unload the page.
http://yoursite.com
-> User clicks something
-> new address bar reads http://yoursite.com/#/something
because of the hash mark when user goes back it goes back to http://yoursite.com which should inturn fire your show previous div function
read more about the available history manager plugins available for jQuery. There are quite a few. Most if not all provide available callback functions that you can specify.
On change of the state of your page, write a unique set of parameters to the hash of your URL. You can change this via JS without causing the page to reload.
Set a timer on the page that checks the current location hash repeatedly, and if it changes (i.e. the user presses the Back button) then update the state of your page to match the URL.
I have this scheme working to great effect in a local application.
The jQuery Address library is another great alternative.
http://www.asual.com/jquery/address/
You can set the URL for different application states, and get the URL 'parameters' when the page reloads.
Two ideas:
1) onbeforeunload. Ask the user if they want to really go back.
2) Sandwidch a redirect page. Login -> redirect -> your page. A single back click would take the user to your redirect page.
The second is kind of a pain in the neck for people who know what they're doing though. I think the Back button (and all standard navigational elements) should be messed with as little as possible.
I would go with onbeforeunload:
function sure()
{
event.returnValue = "sure?";
}
...
<BODY onbeforeunload="sure()">
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
I need a solution for the page refresh and the back button when using AJAX.
I'm using simple javascript for the AJAX implementation.
If anybody could send a code snippet I would be very grateful.
If you're using jQuery, there's the history plugin.
Here's a solution that I've used in some of my pages. Add this to pages that changes are made at.
window.onbeforeunload = function() {
window.name = "reloader";
}
this triggers when you leave those pages. You can also trigger it if there were changes made. So that it won't unnecessarily reload the page that needs reloading.
Then on pages that you want to get reloaded on after a the browser "back" use.
if (window.name == "reloader") {
window.name = "no";
location.reload();
}
this will trigger a reload on the page you need reloading to.
essentially, you need to use & monitor the hash portion of the url...
http://.../path?parms#hashpart
Whan you change the hash, iirc window.location.hash , it won't reload the page, but your ajax can monitor, and respond to it.
The onbeforeunload event can be useful to guard against refreshing but it fires if you navigate away or refresh. If you require that users login to the app you can always show a generic message advising against navigating away and refreshing. If users click your app log out button set a var to disable the warning. Could probably also make a 'Close' button that does the same thing.
Try PathJS it does not require jQuery or any other additional lib.