Make browser to go back by reloading page 1st and then scrolling it back again too

Question

EXPLAINING WHAT I'M TRYING TO SOLVE:

I have a webpage (file_list.php) showing a list of files, and next to each file there is a button to delete it. When user press the DELETE button close to a certain file name, the browser goes to a script called delete_file.php that deletes the file and then it tells browser to go back to the file_list.php

delete_file.php uses a simple header("Location: file_list.php”); to go back to file_list.php

When browser goes back to file_list.php it reloads the page, but it DOES NOT scroll it back again to where the user was before. So let's say the user scrolled the files list and deleted the last file, when the browser shows again the page file_list.php it won't be scrolled to the bottom of the page again.

THE WORKAROUND I CAME OUT WITH:

I found a strange way to work around this, basically instead of using header("Location: file_list.php”); in delete_file.php I simply use a javascript call window.history.go(-1).

This workaround works perfectly when user is in session (simply using PHP session_start function): the browser RELOADS the file_list.php page and then scrolls it also back to where it was before. But if the user is NOT in session the browser scrolls the page but IT DOES NOT RELOAD IT before, so the user would still see the file he deleted in the file list.

THE QUESTIONS

1. Do you know how to reproduce the behavior of the browser when goes back being in session even if we are not in session?

2. Do you know a way out of this, even another way of solving this matter?

Thanks!

*I know I could use AJAX to delete the file so I would not have to go every time to delete_file.php, but this is not the answer*.

Answer 1

You could emit anchors:

<a name="anchor1"/>filename_this
<a name="anchor2"/>filename_that

To delete filename_this, you pass the delete page filename_this and also anchor1. The delete page then redirects to file_list.php#anchor1

Note that the anchor names shouldn't map to the file names. That way when you delete the fifth file, the anchor is near the "new" fifth file (where the old one used to be).

Answer 2

How about submitting to an IFRAME? (no JS at all? you will not be able to hide the deleted entry...)

Answer 3

Browsers generally remember where you were. If you go from page A to B, then go back (with the back button), you should arrive at the same place in page A.

When you use header('location: A.php');, you are instructing the browser to go forward to another page. It has never been there before, so it can't know what the scroll position was.

When you use history.go(-1), you are instructing the browser to click the back button, which is why your workaround works. You are likely emitting a no-cache header, which is why the browser is reloading the page. The effect here is the same as just reloading the page (without navigating). The trouble with this is that then the user can click the "forward" button, and arrive at your delete_file.php again (and may end up accidentally deleting another file).

Some ideas:

• You can put a bunch of anchors on the page (one for each file), and redirect to the anchor that is closest to where the user clicked. So, if you deleted file 4, then redirect to file 3 header('file_list.php#file3');.
• Compute the current scroll position in javascript, and store it in a cookie. When the page reloads, use javascript to scroll to where you were (making sure to only do this only once, it would be confusing to visit the page 3 days later and scroll to the middle for no particular reason).
• You can also use AJAX to delete the file in the background. Here you are letting the browser deal with the scrolling. This might not be the answer you're looking for, but it's certainly a solution.

In my opinion, the best solution is the simplest: make your pages shorter. If your pages aren't long enough to scroll, then there's no problem.

Answer 4

So to summarize, your steps are:

1) "a webpage (file_list.php) showing a list of files"

2) "delete_file.php that deletes the file and then it tells browser to go back to the file_list.php"

I'm assuming file_list.php only shows the current contents of the directory, which would obviously not include the file you just deleted. But you want file_list.php to somehow hint to the user something about the file they just deleted, like by jumping back to the position the file would normally be in the list had it still existed. There are probably several dozen ways to do this.

1) delete_file.php opens the url "/file_list.php#the_file_i_just_dele.ted". After you gather directory contents in an array, insert 'the_file_i_just_dele.ted' into that array, probably in alphabetical order or whatever. That array should have another boolean field: "deleted" => 1 | 0, which in case of the deleted file would be 1. While progressing through the array to echo the list, add a html anchor, which could simply be the filename, next to each list item. If 'deleted' is 1, don't echo the 'delete' button next to it. On page open, the page will jump straight to the 'the_file_i_just_dele.ted' anchor.

2) Use ajax.

3) Have a separate php library file for all your filesystem actions. file_list.php is the only page your client needs to see. On delete, file_list.php will post to itself with '#deleted' appended to the url, gather directory contents into an array, then delete the requested file, echo the array, and when your deleted file is encountered in the loop, disable or don't draw the 'delete' button and echo the 'deleted' html anchor right next to it. On page open, the client will automatically jump to the 'deleted' anchor.

4) Make a shopping cart and just not be concerned with this whole 'keeping track of where the user is on the previous page' problem. Have the user check off each file to be deleted. Use a cookie, DB, or session file to keep track of the cart contents if the "shopping" experience would span multiple directories and pages. User clicks a single 'delete' button at the bottom of the page. Add a 'checkout confirmation' page asking the user to confirm deletion of the listed files if you want to.

...etc...

You can also mix and match the solutions as you see fit.