Sign In/My Account | View Cart  

advertisement

AddThis Social Bookmark Button

Listen Print Discuss

AJAX: How to Handle Bookmarks and Back Buttons
Pages: 1, 2, 3, 4, 5, 6

Conclusion

You have now learned to use the Really Simple History API to make your AJAX applications respect bookmarks and the back and forward buttons, and have example code that can be used as scaffolding for creating your own applications. I look forward to seeing your AJAX inventions out in the wild, complete with bookmarks and history support.

Acknowledgements

Special thanks to everyone who reviewed this article and the Really Simple History framework: Michael Eakes, Jeremy Sevareid, David Barrett, Brendon Wilson, Dylan Parker, Erik Arvidsson, Alex Russell, Adam Fisk, Alex Lynch, Joseph Hoang Do, Richard MacManus, Garret Wilson, Ray Baxter, Chris Messina, and David Weekly.

Resources

Brad Neuberg has done extensive work in the open source community, contributing code to Mozilla, JXTA, the Jakarta Feed Parser, and more.

Return to ONJava.com.


  • Thanks for your article
    2008-12-06 06:59:57  yuenflai [Reply | View]

    Hi there,

    Thanks so much for this article and it helped me a lot to code my social network site in AJAX and solve the problem of back and next.. and also bookmark.

    Please take a look: http://www.ecpod.com

    I am so happy to get rid of this problem now and to have a 100% AJAX site.

    Rgds,
    • back button ajax!!
      2009-11-05 17:47:33  juanno [Reply | View]

      hey i put all together and its working!! but i notuiced that in IE8 there is a bug!!! and in your web page also!!! am doing another web page in ajax and this bug in IE8 is driving me crazy!!
      my msn is juanm58@hotmail.com add me to chat about this!!
      pd: i like ur page!!
  • Does not work when leaving page (IE 7)
    2008-10-07 03:01:20  Akora [Reply | View]

    Hello

    This codes works perfekt..allmost.

    Everything works great in FireFox (as usuall), but not so great in IE (have only tried in IE 7). When I navigate throw the Ajax-links in both browsers it works great (both back and forward button), but when I click on a "real" link and then the back button it only works in FF. It is like the code does not trigger when you return to the page with the ajax links in IE.

    I have tried to run diffrent tests but the only thing I can see is that the history-function does not run when returning to the ajax page.

    Does anyone have a solution for this? Please get back to me here (will check page often).

    Best regards
    Rikard
  • RSH problem with IE
    2008-05-27 18:42:47  apj100 [Reply | View]

    Its working for me in FF but not in IE (both 6 & 7).
    In FF, in the log window i see
    "dhtmlHistory listener created dhtmlHistory initialized"

    But the same is not seen in IE. Log window is blank when the page is first loaded.
    I belive there is some problem with window.dhtmlHistory.create,
    dhtmlHistory.initialize and dhtmlHistory.addListener.

    Can anybody help me on this ?

    Thanks.
  • JSON / dhtmlHistory compatibility ?
    2008-03-11 12:31:45  rivkaha [Reply | View]

    I noticed your interesting usage of the Array.prototype.______array. Interestingly enough, I have discovered through the use of Firebug that every DOM array on my page now includes an ______array field.

    I tried removing the JSON code from the dhtmlHistory script, and replaced the JSON.stringify function with the new toJSONArray function. However, I received an error "too much recursion" in Firefox.

    I am looking for some illumination on the topic of this particular usage of the array prototype and how to solve my added array field problem. Perhaps you can direct me as to where I can find the answer, even if you do not have the time to emaborate yourself.

    Thank you for providing this much-needed library. It greatly improve the usability of AJAx web applications with many fewer bugs and cross-browser compatibility issues than I have seen in other back-button-preservation attempts.
  • Does not work
    2008-02-04 09:59:07  ShamsulJewel [Reply | View]

    Hi thanks for this solution...But I can't work on it..I download the example and put it to my localhost..and run the oreillymail.html but the left button do not work as like demo...where is the problem? any one please tell me the procedure? please help.
    • Does not work
      2008-04-10 23:11:20  jmx33 [Reply | View]

      I had the same problem. The real "problem" here is the downloaded examples files. I think the dhtmlHistory.js file is a corrupt one. The live demos do not use the exact same dhtmlHistory.js (as provided in the download)
      what i did was download the dhtmlHistory.js separately from the live demos. I did it using the web developer toolbar plugin in Firefox. All you need to do then is replace the dhtmlHistory.js file from the downloads(aprox. 27kb) with the new one from the live demos(aprox. 30kb). It should work.
  • Framed browsing
    2007-05-02 13:18:44  wayfarer3130 [Reply | View]

    In Firefox 2.0, the history mechanism works as a frame based history, going back and forth within the frame. It doesn't work at all in IE within a frame - it does weird things to the display.
    Are there any thoughts on making this work for frames, and of having methods to add/remove from the overall frameset URL, as well as the child frame URL? That would be really powerful for improving frames usage as you could then have a local history contained within a bigger overall history, and have a way to bookmark the current state of all your frames by changing the top level URL. I agree that people are getting away from using frames, but I think that is because they don't work all that well as currently designed with the history button problems etc, but in terms of design, they are really quite nice to use.
  • When one of your ajax pages contains real anchors...
    2007-04-23 02:58:24  funkydunc [Reply | View]

    Great solution! I'm currently implementing it on www.streamthru.com.

    There is a problem though, if one of the pages you load with an ajax request contains real anchors. An example, from my site, is a faqs.html page that contains anchors #FAQ1, #FAQ2, #FAQ3 etc.

    If you navigate to this page, then click on the anchors, when you navigate back, the historyChange function must reaload the faqs.html page when it detects the #FAQ1, #FAQ2, #FAQ3 entries.

    This works fine in Firefox, but in IE 6 and 7 duplicate history entries seem to be created, so when the forward journey is faqs.html -> #FAQ1 -> #FAQ2 -> #FAQ3, the backward journey is #FAQ3 -> #FAQ2 -> #FAQ3 -> #FAQ2 -> #FAQ1 -> #FAQ2 -> #FAQ1 -> faqs.html

    Has anyone found a solution to this? I'll post an update if I find one. Thanks. Duncan
  • RSHf and dynamic ajax multiselect
    2007-04-18 07:57:06  hcvitto [Reply | View]

    hi
    i was trying to use your framework and adapt it to the website i've been working on

    http://office.azero.it/fitoben.it/prodotti/prodotti.php

    but have no idea how to do that.
    Has anyone some idea on how to do that?
    thanks
    vitto
  • Problems in Internet Explorer 6
    2007-03-29 10:07:15  an00bis [Reply | View]

    I ran into problems with keys containing a question mark for a query string. A workaround was to replace the "?" in displayLocation, handleMouseClick and historyChange with some other valid character when storing the key, then switching it back when loading that information.
  • memory footprint
    2007-03-28 06:01:34  pmouawad-at-ubik-ingenierie [Reply | View]

    Hello,
    Thanks for this great solution.
    My question is : Isn't there a problem with the historyStorage size, it will grow indefinitely and slow down the Browser during from JSON/to JSON operations and also occupy a big memory footprint.
    Am I missing something ?
    • memory footprint
      2007-03-29 10:11:09  an00bis [Reply | View]

      I use it to store only the URL for the request I'm making. When moving back and forth through history that information will just reload.
      • memory footprint
        2007-04-01 09:19:32  pmouawad-at-ubik-ingenierie [Reply | View]

        Yes but with a navigation on an intranet application the this.storageHash field will grow and grow, I displayed the size of the stringified field and I saw it growing indefinitely. Remember that only identical hashes are replaced.
        I implemented a king of FIFOBuffer that I limited to 100 entries to workaround this potential problem.
  • RSH breaks in IE7
    2007-03-20 06:53:13  burnt1ce85 [Reply | View]

    Can someone confirm that RSH breaks in IE7? Does anybody know another solution?
    • RSH breaks in IE7
      2007-04-16 13:31:45  bluecat [Reply | View]

      hi I've found a resolution in http://blog.jorgemaestre.com/2007/01/23/dhtmlhistory-bug-en-ie7/

      but I have not tried. does anyone try it?

      Thanks.

    • RSH breaks in IE7
      2007-03-20 08:01:41  an00bis [Reply | View]

      I just tested in IE7 and back/next and bookmarking work for me.
  • Great Lib !
    2006-11-14 01:45:53  jWiesmann [Reply | View]

    Hi @ all,

    this lib is amazing easy to use. But i figured out a bug using it with IE 6.0. It seems not to be a bug of this lib, but of IE.
    If i used to import the lib not directly before initializing, there always every request will be destroyed after calling it via ajax.
    I do not know why exactly, but it seems to be because of the iframe.
    Again:
    So it works great:

    <script type="text/javascript" src="javascript/dhtmlHistory.js"></script>
    <script type="text/javascript">

    dhtmlHistory.initialize();
    dhtmlHistory.addListener(historyChange);
    function historyChange(newLocation, historyData) {
    ....}


    but not if i got some content between the initializing and the import of that script, like that:

    <script type="text/javascript" src="javascript/dhtmlHistory.js"></script>
    </head>
    ... ANY CONTENT
    <script type="text/javascript">

    dhtmlHistory.initialize();
    dhtmlHistory.addListener(historyChange);

    it will not work at all. (Only IE, fireFox works (as expected) great)
    ...
    however .. i really like that lib :) if someone can explain that phenomenon to me, it would be great ..
    The content between that stuff is nothing special..just some JSTL scripts ..
    Greets jWiesmann
  • strange behavior w/ tomcat
    2006-09-21 13:49:10  donlee8 [Reply | View]

    i've been trying to use this on a local instance of tomcat 5.5 and am getting a strange error. when i make ajax calls the url is being updated correctly. but the back/forward buttons just show the hidden iframe's location (localhost/blah/blank.html?NEWLOCATION) and doesn't update the page url. happens on my web app and also running the example locally. however the examples run fine from this site. has anyone ever encountered this?
    • strange behavior w/ tomcat
      2006-09-21 13:53:05  donlee8 [Reply | View]

      i should add this only occurs w/ IE. Firefox works great.
  • Problems with IE 7 RC 1
    2006-09-18 03:34:00  gswkaiser [Reply | View]

    I am using the package now for several months will all Browsers.

    But with Problems with IE 7 RC 1 there is a big Problem:

    the screen gets blanked!

    Using the "IE HTTP-Analyser", I can see, that this happens, when the "blank.html" (which is supposed to go into the IFRAME so far) is requested from the server!

    Has anybody seen this behaviour and/or has a solution for it?????
    • Problems with IE 7 RC 1
      2007-08-07 23:06:51  claudiog [Reply | View]

      i experience the same. does anyone has a solution for this? i guess i am making some mistake
      regards, Claudio
  • Loading bar in IE
    2006-09-10 11:22:54  KieranS [Reply | View]

    Has anyone noticed that in IE you see a loading bar in the status bar when navigating the o'reilly mail example. This seems to go against the ajax concept of not seeing any page refresh/loading?

    Any thoughts appreciated.

    Thanks
    Kieran
  • Doesn't work in IE after a popup window
    2006-08-16 14:57:23  koehn [Reply | View]

    I'm using IE 6.0.2900, and for some reason after a popup window IE won't preserve the historyStorage iframe.

    If I turn on debugging, I can see my code inserting data into the iframe, but if I open a popup window (created with window.open()), link away (from the main window), and hit the back button, the iframe is empty when I return, and dhtmlHistory.isFirstLoad() returns false.

    My popup window doesn't use dhtmlHistory at all.

    Otherwise, it's been a wonderful utility.
    • Doesn't work in IE after a popup window
      2006-09-19 00:34:22  PJones [Reply | View]

      I had a similar problem, which broke dhtmlHistory after viewing a pdf or image in a popup window.

      I found that after the popup window, when pressing the back button, the browser actually requested the page from the server rather than using its cache. When it re-requests the page from the server, the historyStorage is reset to empty, which prevents dhtmlHistory from working.

      To fix this, I set the http Expires header for the page to a time in the future. (Previously we had a Expires : 0 in the header). This ensures the cached version of the page is used, which keeps the historyStorage intact and dhtmlHistory working.

      This exact fix may not work for you. Your server may return other headers which may also cause problems.
  • Duplicate key entries
    2006-07-25 02:31:24  KieranS [Reply | View]

    Hi there,
    Is there a way to handle duplicate history entries. For example as my users navigate around my ajax navigation, they may click Reports > Home > Reports. The RSHF seems to stop you from adding an entry to the history with the same # key. Is there a good way to handle this?
    Thanks!
    Kieran
  • Loading a bookmarked page erases history
    2006-07-07 02:15:13  gbaud [Reply | View]

    After loading a bookmark, previous states in history are lost. This only happens in IE. It seems that when a bookmark is loaded, the history change listener is invoked twice. And clicking the back button reveals that previous states are gone (except for the last one before the bookmark was loaded). Has anyone come across this problem? Any ideas? Thanks!
  • Awesome code package
    2006-06-29 01:29:36  joshua_70448 [Reply | View]

    I just started using AJAX on my website, Retrogade.com, using the Yahoo! Developer code to run the requests, and I found your code as a way to fix the history/bookmark problems in AJAX. Very nice stuff, I managed to get it working quite easily. One minor gripe, though: In IE, I've got blank.html in the same directory as my XML pages, but the Back history contains a number of blank.html pages, instead of the XML pages themselves. This problem doesn't appear in Firefox, which handles the AJAX pages perfectly. Hooray for standards compliance!

    Oh, and I've also noticed that if you use a default value when no hashed value is given, you end up with a nasty little problem. If you go through a few links on an XML page starting from a URL without a hash, and then try to go backwards, the Back button stops on the non-hashed page, which bounces forward to the default value. You can still navigate back using the dropdown from the Back button, but when you get bounced, the Forward history disappears. I've fixed this by not using a default value, and it works fine now.

    All in all, I'm quite happy with this code and want to say thanks!
  • some error in dhtmlHistory
    2006-06-01 04:09:03  Vladimir_TTT [Reply | View]

    If I start my browser on http://firstpage.html after I am over to page vere I use Ajax with history do some steps on this page press back button up to http://firstpage.html and press forward button I lose all my history of Ajax page.
    It happens on my IE 6.0.3790.1830, with mozilla firefox 1.5.0.3 it is work without this bug
    • some error in dhtmlHistory
      2006-06-03 23:14:19  Vladimir_TTT [Reply | View]

      with IE 6.0.2900.XXXX this bug does not exists
      but seems this library does not work with EI 7 beta 2.
  • Two Common Issues and Fixes
    2006-02-24 10:33:03  BradNeuberg [Reply | View]

    I've gotten a bunch of emails about two common issues; they are easy to fix:

    * The Really Simple History library ONLY works if loaded from http:// URLs, and NOT file:// URLs. This means you must set up a local HTTP server, such as Tomcat or Apache, for your testing. This happens because browsers have bugs in their file:// URL handlers that break history.
    * For Internet Explorer, you MUST have the file blank.html in the same directory as the HTML page you load the RSH library in. This file is needed by the hidden iframe.

    Best,
    Brad Neuberg
    Creator of Really Simple History Library
  • DOesn't work for me either
    2006-02-24 07:03:39  jimE [Reply | View]

    ie 6.0.2800 THE SAMPLE as down;loaded doesn't work. No errors but back button remains disabled.
    • Doesn't work for me either
      2006-02-24 08:00:04  jimE [Reply | View]

      Some more details.
      I downloaded latest.zip and unzipped to a local drive. Viewed testDhtmlHistory.html in Firefox and it worked as expected. In IE the same thing does not create any history so the back button remains disabled. The simple demo from page 4 of the article works fine in the same IE instance.
      • Doesn't work for me either
        2006-02-24 08:05:58  jimE [Reply | View]

        Just tried serving the files from a local Tomcat instance and it worked just fine. The problem only occurs when the URL is file:///...
        • Doesn't work for me either
          2007-02-21 19:30:45  hellajoey [Reply | View]

          So what is known about the IIS issues? I have the exact same experience (simple example from page 4 works from O'Reilly site in IE; also works from my local site in Firefox but not IE -- the history is not registered). I am using IIS and don't have an option to change that. Any help would be great!
  • Great stuff! But does not work in IE 6.0.2900
    2006-01-17 08:38:50  DamienB [Reply | View]

    Hi Brad,

    This is great stuff and it is very easy to use!
    But I think I found an issue with IE 6.0.2900. The test testDhtmlHistory.html does not store anything in the back button.
    Just wondering if you knew about that.
    Thanks,
    Damien
    • Great stuff! But does not work in IE 6.0.2900
      2006-01-17 10:11:11  BradNeuberg [Reply | View]

      Interesting; were you testing the demo page here on this site, or on your own web server? Wierdly enough, I have heard that IIS can have issues sometimes.

      Email me with more details: bkn3@columbia.edu.
  • Fixed
    2005-12-05 09:48:55  BradNeuberg [Reply | View]

    Sorry about that! My webserver crashed over the weekend and I just restarted it this Monday morning; try again to download the files and examples. If you have a problem feel free to email me at bkn3@columbia.edu.

    Best,
    Brad Neuberg
  • ?
    2005-12-05 08:10:22  SlapStik [Reply | View]

    Is it me or has "Really Simply History framework" slipped of the planet every link goes to "coding paradise" which is either down temp or for good is their anywhere else you can get the code ".zip" ?

    Thanks
  • Why onjava.com?
    2005-10-31 07:53:44  tcowan [Reply | View]

    The examples are JavaScript/HTML and just about any web oriented developer would find this article useful.
  • More discussion
    2005-10-27 09:30:24  BradNeuberg [Reply | View]

    Hi folks; there is also a discussion on the Really Simple History framework and this article going on at The Server Side over at http://www.theserverside.com/tss?service=direct/0/PostNewsReply/postReply&sp=l37307&sp=F&sp=l189398
    • Updated link to TSS thread
      2006-08-17 06:41:35  digitalsanctum [Reply | View]

      The above link doesn't seem to work. Here's an updated link that does:

      http://www.theserverside.com/news/thread.tss?thread_id=37307

      Shane,

      AJAXMatters.com
  • Quicksand?
    2005-10-27 03:16:05  hieper [Reply | View]

    I can't check the working of your AJAX history solution since I use Safari, but it seems to solve a basic problem on other browsers.

    What I was wondering though: the solution depends on iframes. This may be the only way to go for now, but it doesn't seem to have any future (or present even), since iframe is already absent from xhtml strict. Isn't this a 'hack' with a limited life? Are there alternative approaches, or should browsers / standards provide more AJAX support in this area?
    • Quicksand?
      2005-10-27 09:06:57  BradNeuberg [Reply | View]

      Hi Hieper. Only the Internet Explorer part of the solution depends on iframes; Firefox uses a timer and checks the location bar at regular intervals.

      In time, I hope that browsers bake the kind of functionality in the Really Simple History library right into the browser itself, for improved reliability.

      In terms of XHTML, I believe that XHTML is a dead end; see my blog post "XHTML Considered Harmful" at http://codinginparadise.org/weblog/2005/08/xhtml-considered-harmful.html for details.

      Thanks for reading and commenting on the article.

      Brad Neuberg
  • Really Helpful Article
    2005-10-26 21:37:53  SilentWalker [Reply | View]

    I used AJAX in one of my projects but it could not interact to the users back button. My clients have alredy asked me to provide a solution for that. Therefore this article will be really helpful for me. As I've seen the demo examples, I am sure I've got the right solution.

    Thanks a lot.
    http://asif.blog-city.com
    • Really Helpful Article
      2005-10-27 09:05:07  BradNeuberg [Reply | View]

      Hi SilentWalker! I hope the Really Simple History library and this article helps you in your project.
      • Browser history clears when refreshed!
        2007-01-29 02:52:42  ra00l [Reply | View]

        Hello!

        I a really excited about this library. I am just starting to use it, but I ran into a little problem. If I refresh the page [using refresh buton or F5], the back button is disabled for some reason. This behaviour happens for IE 6 and IE 7. Do you know any fixes for this?
        Thanks a lot!
        Raul