tabbed interface using ajax : bookmarks and back-button

[John A Grandy]

For a tabbed interface implemented with ajax ( tab contents located inside
an UpdatePanel ) , a well-known problem is the inability to bookmark a
specific tab and the inability to use the back button to return to tabs
previously viewed.

Does anyone have any ideas / solutions / alternate designs for this problem
?

 

[Michael Nemtsev [MVP]]

Hello John,

Just change the url when u change the tabs, adding some id, like "mysite.com/tab?<number>"
and when bookmark this page u need to parse the tab number and open it

I'd use the ASP.NET MVC for this

---
WBR,
Michael Nemtsev [.NET/C# MVP] :: blog: http://spaces.live.com/laflour

"The greatest danger for most of us is not that our aim is too high and we
miss it, but that it is too low and we reach it" (c) Michelangelo


JG> For a tabbed interface implemented with ajax ( tab contents located
JG> inside an UpdatePanel ) , a well-known problem is the inability to
JG> bookmark a specific tab and the inability to use the back button to
JG> return to tabs previously viewed.
JG>
JG> Does anyone have any ideas / solutions / alternate designs for this
JG> problem ?
JG>

 

[bruce barker]

most ajax toolkits have a browser history control you use for this. MS is
working on one (see futures). but writing you own is not hard.

the standard way ajax pages write to history is to use the #bookmark feature
of the browser. render bookmarks for each tab. after a tab is selected, in
javascript, navigate to the bookmark for that tab. this will not postback,
because the bookmark is on the page, but will the bookmark to the browser
history.

if the user saves the link, it will have the bookmark (say myurl.aspx#tab1).
when you render the page, your code looks ate the bookmark to determine the
state (which tab fixed).

now all have to code for back button support. no real load is done (or you
coudl just use the onload event). the simple way is to run a timer that
checks if window.location.href has changed.

if you google ajax history support you will find several toolkits for this,
if you want to skip the fun of wrting one.


-- bruce (sqlwork.com)