AJAX broke the back button

[davearia]

Hi,

 

Like most developers using AJAX for the first time everything works well on my project with the exception of the back button and bookmarks.

 

Now that all the reloading and redirecting has been removed from my pages with the help of AJAX, the history that would normally be in the browser has now gone also.

 

I have googled for an hour looking for the best way to fix this and I haven't really found anything that seems to work yet.

 

Can anyone help me with this please?

[mskeel]

I've seen that topic come up a few times on ajaxian.com so I would search around there for a solution. Using google's site search feature (site:ajaxian.com) might help. I turned up one or two solutions with a quick browse. Most of them involve either server side or javascript trickery/hacks. Since your using ASP.Net Ajax and IIS, you might have to take the concepts they use and adapt them to your project.

[davearia]

Hi,

 

I followed the links as mskeel suggested. But as yest I have not come up with any obvious solutions.

 

As mskeel said, it will rely on javascript trickery.

 

I will keep reading, in the mean time if anyone has had to do this thing before please share?

 

Cheers, Dave.

[MrPaul]

Too much AJAX

 

There is such a thing as too much AJAX. If there is content on your site you want added to browser history, which can be navigated to via the browser back and forward buttons, or which can be accessed directly via a URL, then you probably should not be using AJAX to access this content.

 

The same can also apply to ASP.Net postbacks. I once worked on a site where the previous developers had designed everything using postbacks, which is what essentially lies behind AJAX. This was also a "Web 2.0" site, entirely driven by user-generated content, and I had to demonstrate to the site owner that unless users were provided with copy-and-pasteable URLs direct to content, they would be unlikely to sign up. Having to navigate from the homepage because everything works by postbacks is poor design. Same with AJAX.

 

Don't get me wrong, AJAX is good if used correctly. Unfortunately it is too easy to overuse and thus hinder useability, the one thing it is designed to aid. Its ideal application is on pages which display information which can then be edited using AJAX-powered controls which appear on demand - if you've used sites like Facebook you'll know what I mean. Using it for navigation is not generally advisable.

 

Good luck :cool:

[mskeel]

Generally speaking, I agree with MrPaul.

 

Check out this link for a design pattern for creating unique urls. http://ajaxpatterns.org/Unique_URLs

 

That will do the trick for the bookmarks and probably the back button as well.

[davearia]

Hi,

 

Thanks for your words of wisdom.

 

I'll tkae a few days off and enjoy the weekend. By Monday morning I'll have got some more ideas. I will read the links and get this thing working.

 

I take your point that you can fall into the trap of using AJAX just for the hell of it. However this project was suitable oportunity for me to get to grips with this new technology and I have learned a lot.

 

More over if I can get to grips with using AJAX and keeping browser history that will be an acheivement. That is not to say that I would always go down the AJAX route. But I have always avoided client side things in the past and I feel happy to get my hands a little dirty on the client side of things.

 

Anyway have a good weekend all.

 

Best regards, Dave.

[davearia]

Please help!

 

I worked on this yesterday and unfortunately didn't get very far at all.

 

Here are some of the threads I have looked at:

 

1. http://codinginparadise.org/projects/dhtml_history/README.html#download The file download link is broken, so I couldn't get all of the files downloaded.

 

2. http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps As the example page has error alert box I left this.

 

3. http://www.unfocus.com/projects/source/tests/HistoryKeeper.html. This example is about the best I have found so far in that it seems to work with the page rather than individual controls. But when you navigate to this: http://www.unfocus.com/projects/historykeeper/. The page has some warning on it and you cannot get anything from this site other than the example. Strange thing is yesterday you could read these pages. So even though the message says Your PHP installation appears to be missing the MySQL which is required for WordPress. It would seem reasonable to suggest it is a problem on their end.

 

So lets say I wanted to make a local version of this page to start things off. I managed to get a zip file off their site yesterday before the errors showed up. In the HTML there are 4 javascript files referenced (JSFixes.js, EventManager.js, QuickLoader.js and History.js), the zip had 3 of these files in. Or at least 3 files with the same names, but JSFixes.js is missing. I tried changing the URL to get this file like this: http://www.unfocus.com/projects/source/tests/javascript/unFocus/Utilities/JSFixes.js unfortunately it didn't work.

 

First of all is this the best way to go about it? Is it possible to get this page working locally?

 

The page I am trying to create history for has a couple of user controls I have written and I though it would be quite easy to store the history but I am starting to lose my train of thought.

 

I looked at many other sites with solutions to these but none seemed to help me to come up with a solution to this problem.

 

Any help appreciated. Also I am sure I have missed out important details so please ask and I'll get back to you.

 

Cheers, Dave.:D :D :D

[davearia]

Hi,

 

The best solution I found was: http://quickstarts.asp.net/Futures/ajax/doc/history.aspx

 

You can download the non-visual history control etc at: http://www.microsoft.com/downloads/details.aspx?familyid=A5189BCB-EF81-4C12-9733-E294D13A58E6&displaylang=en

 

So you add the control to your page like so:

<cc1:History ID="History1" runat="server"</cc1:History>

Then create a method that you call every time history needs adding like so:

Public Sub AddToHistory(ByVal typeOfSearch As Int32, ByVal typeOfSearchCriteria As Int32, ByVal searchCriteria As String, ByVal dataCriteria As Int32, ByVal orderStatus As Boolean, ByVal pageNumber As Int32, ByVal numberOfResultsPerPage As Int32) Handles UserInput1.AddToHistory
       History1.AddHistoryPoint("typeOfSearch", typeOfSearch)
       History1.AddHistoryPoint("typeOfSearchCriteria", typeOfSearchCriteria)
       History1.AddHistoryPoint("searchCriteria", searchCriteria)
       History1.AddHistoryPoint("dataCriteria", dataCriteria)
       History1.AddHistoryPoint("orderStatus", orderStatus)
       History1.AddHistoryPoint("pageNumber", pageNumber)
       History1.AddHistoryPoint("numberOfResultsPerPage", numberOfResultsPerPage)       
   End Sub

 

Finally create the navigate event for this control:

Protected Sub History1_Navigate(ByVal sender As Object, ByVal args As Microsoft.Web.Preview.UI.Controls.HistoryEventArgs) Handles History1.Navigate
       Dim typeOfSearch As Int32 = 0
       Dim typeOfSearchCriteria As Int32 = 0
       Dim searchCriteria As String = String.Empty
       Dim dataCriteria As Int32 = 0
       Dim orderStatus As Boolean = False
       Dim pageNumber As Int32 = 0
       Dim numberOfResultsPerPage As Int32 = 0

       'Get information via the history control.
       If args.State.ContainsKey("typeOfSearch") Then
           typeOfSearch = Convert.ToInt32(args.State("typeOfSearch"))
       Else
           typeOfSearch = 0
       End If

       If args.State.ContainsKey("typeOfSearchCriteria") Then
           typeOfSearchCriteria = Convert.ToInt32(args.State("typeOfSearchCriteria"))
       Else
           typeOfSearchCriteria = 0
       End If

       If args.State.ContainsKey("searchCriteria") Then
           searchCriteria = args.State("searchCriteria").ToString
       Else
           searchCriteria = ""
       End If

       If args.State.ContainsKey("dataCriteria") Then
           dataCriteria = Convert.ToInt32(args.State("dataCriteria"))
       Else
           dataCriteria = 0
       End If

       If args.State.ContainsKey("orderStatus") Then
           orderStatus = Convert.ToBoolean(args.State("orderStatus"))
       Else
           orderStatus = False
       End If

       If args.State.ContainsKey("pageNumber") Then
           pageNumber = Convert.ToInt32(args.State("pageNumber"))
       Else
           pageNumber = 0
       End If

       If args.State.ContainsKey("numberOfResultsPerPage") Then
           numberOfResultsPerPage = Convert.ToInt32(args.State("numberOfResultsPerPage"))
       Else
           numberOfResultsPerPage = 0
       End If

       'Use this information to restore page to its historical state.
       UserInput1.UpdateFromHistory(typeOfSearch, typeOfSearchCriteria, searchCriteria, dataCriteria, orderStatus, pageNumber, numberOfResultsPerPage)

       If searchCriteria.Length = 0 Then
           'This page had no search criteria, therefore there is no tables to show.
           UpdatePanels(Nothing)
       End If
   End Sub

 

From there you have the job of using this history to restore you U.I.

 

I thought there was a simpler way, but this worked best for me.

 

Cheers, Dave.

Edited August 6, 2007 by davearia