6

I have done a few searches for this issue and I have come up empty handed. I hope somebody can clarify things for me and point me in the right direction.

Problem: I have a page that displays a list of results after submitting a search form. When a user clicks on one of the results, the browser goes to a new page showing more information about the result. When the user then clicks the 'back' button to go pack to the results, my browser reloads the page and shows the top of the page instead of the result that was last clicked.

Goal: What I would like is this: when the user click's the back button, the browser should go back to the previous page and, instead of showing the top of the page, show the page at the previous position.

Solution: I am completely lost as how this result can be achieved. Could it have something to do with javascript, or headers sent to the browsers, maybe something to do with caching.

Improve this question

4 Answers 4

Reset to default
2

If this is incredibly important, I'd suggest investigating the following:

  • add ids to each outgoing link
  • use JavaScript to capture the onClick for the links
  • when a link is clicked, redirect the user to that link's id fragment identifier, then link out as desired

When the user hits the back button, they'll return to that specific link, e.g. http://www.example.com/#link27 instead of http://www.example.com/

You may be able to get some ideas from here:

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

So the pseudo code would look something like this: 1. User clicks on a link in the result list. 2. An onClick event is called from the link that was clicked. 3. The function called from the event gets the link's id. 4. The function redirects the page to the results page with the id of the link appended to the end of the address 5. After the results page reloads, the function redirects the page to the page with more information about the results. Is this what you mean? I can see how it works, but it would be nice to find a more direct way without having to reload the results page a second time
Yes, exactly. And yes, it's complicated.
@VinkoCM, a full page reload shouldn't be necessary. Moving between fragments of the same page should be near-instantaneous on most browsers.
1

You can use javascript and jquery to set the scroll position of the window and cookies to store the position to scroll to. In the javascript of the page with the search results you could have something like this:

var COOKIE_NAME = "scrollPosition"; $(document).ready( function() { // Check to see if the user already has the cookie set to scroll var scrollPosition = getCookie(COOKIE_NAME); if (scrollPosition.length > 0) { // Scroll to the position of the last link clicked window.scrollTo(0, parseInt(scrollPosition, 10)); } // Attach an overriding click event for each link that has a class named "resultLink" so the // saveScrollPosition function can be called before the user is redirected. $("a.resultLink").each( function() { $(this).click( function() { saveScrollPosition($(this)); }); }); }); // Get the offset (height from top of page) of the link element // and save it in a cookie. function saveScrollPosition(link) { var linkTop = link.offset().top; setCookie(COOKIE_NAME, linkTop, 1); } // Boring cookie helper function function getCookie(name) { if (document.cookie.length > 0) { c_start = document.cookie.indexOf(name + "="); if (c_start != -1) { c_start = c_start + name.length + 1; c_end = document.cookie.indexOf(";", c_start); if (c_end ==- 1) c_end = document.cookie.length; return unescape(document.cookie.substring(c_start, c_end)); } } return ""; } // Another boring cookie helper function function setCookie(name, value, expiredays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + expiredays); document.cookie = name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires=" + exdate.toGMTString()); }

This assumes your search result links have class="resultLink".

Improve this answer

Comments

0

The first part of the answer is that you use anchors to land on a page somewhere other than the top. So if I have this in my html at the bottom of my page:

<a name="f"></a>

then I can have the user land there by appending the anchor to the end of he url: 

http://www.bullionvalues.com/glossary.aspx#f

So, if you are talking about ASP.Net you can place the anchor in a hidden field on the page info page and then read it from the search page by using: Page.PreviousPage property. 

protected void Page_Load(object sender, EventArgs e) { if (Page.PreviousPage != null) { Object o = PreviousPage.FindControl("hfAnchor"); if (o != null) { HiddenField hf = o as HiddenField; Response.Redirect(Request.Url+"#"+hf.Value); } } }
Improve this answer

1 Comment

Unfortunately, I am using PHP and I know nothing about ASP.NET
0

I fixed this issue by sending headers with php. This was my solution:

header("Expires: 0"); header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header("Cache-Control: store, cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", FALSE);

Thanks to everybody for the help.

Improve this answer

1 Comment

Do you know why this works? If a browser has to go back and hit the web server for the content, why is it more likely to retain page state information on the back button?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.