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 havent really found anything that seems to work yet.

Can anyone help me with this please?

 

[mskeel]

Ive seen that topic come up a few times on ajaxian.com so I would search around there for a solution. Using googles 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.

Dont 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 youve used sites like Facebook youll know what I mean. Using it for navigation is not generally advisable.

Good luck

 

[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.

Ill tkae a few days off and enjoy the weekend. By Monday morning Ill 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 didnt 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 couldnt 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 didnt 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 Ill get back to you.

Cheers, Dave.

 

[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.