How can I detect client-side when a page load is the result of an AJAX history point?

Question

I'm trying to prevent a "flicker" effect that is occurring on my ASP.NET page which occurs when a user navigates to the page via the browser back button after having navigated away from it. The reason for the flicker is that I'm using an Update Panel which has some content in there on the initial page-load. As a result, when the page is loaded via a back button that initial content is shown very briefly before it is updated with the correct History-aware data.

In order to overcome this I am intending on having the updatepanel hidden (display: none) on inital page load and then show it as long as we don't have any history to deal with. The problem is that I can't find out what to check to determine if there's any history. I can see that the Sys.Application has a _history member but when I'm checking it on page init it is null each time.

Does anyone know what I should be checking to determine if there's history to deal with for a page load client-side? And at what point to do it?

Answer 1

The browser's back button and the functionality that it provides is completely independent of the content of your web page.

One thing you might be able to do is set your location hash when you do an AJAX update. You might be able to detect this when you load a page. I haven't tried it. You should be able to parse out the # portion of the url on the Server Side and see where you are in the AJAX history.

location.hash = 'foo';

Answer 2

Thanks for your response Daniel. I now have a div around my update panel which has its display property set to none. On the Sys.Application's init event I'm checking the window.location.hash value to determine whether the page load is the result of a browser back/forward button click. If it isn't then I'm setting the display property to block, if not I leave it as 'display: none' for the time being.

On the server-side in the ScriptManager Navigate event handler which is called as a result of the back button being clicked I'm registering a client script block which sets the display property to block.

I've done a bit of testing and seems to work fine and I no longer get the flicker. I would prefer to use one of the MS AJAX client objects to check for history but there we are.

Answer 3

Put a hidden input in the page with a blank value, and then on page load set its value. You'll find that when using the back button the page load script will find the value is still set and you can respond accordingly. This takes advantage of browser functionality that preserves form contents between page loads.