Refreshing page after back button

Question

Imagine the web site page rendering a table of students

Name  Surname Age
John  Smith   16
Sally Parker  18
....

By clicking a table row, the page containing student details opens. For example, if I click the second row, I'll be redirected to Sally Parker's page:

Sally Parker
Name: Sally
Surname: Parker
Age 18
Sex: F
Number of courses: 10

Now, if I edit, say, age, and insert 19 instead of 18, then after pressing the back button, I would see the old value (namely 18) in the table, which is misleading in that this info is outdated. At first, I found the following solution: in the html of the page where the table is rendered I placed the code described below:

<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
    onload=function(){
    var e=document.getElementById("refreshed");
    if(e.value=="no")e.value="yes";
    else{e.value="no";location.reload();}
    }
</script>

This approach effectively solves the problem, but eventually proves critically poor user experience. I have to wait for two or three seconds until the page refreshes. Does anyone has any idea of any other method to make the DOM keep track of changes as in the example above providing better user experience ? Does caching have anything to do with this ?

UPDATE: This approach is poor not only in terms of speed, but also in that it is kind of irritating when the user presses the back button navigating to previous page and he thinks that he's already there, begins to scroll the table and suddenly the pages refreshes. This is very annoying.

UPDATE 2: As for this post , I clearly state that I am familiar with the suggested answer, and I deem this approach UNACCEPTABLE in terms of user experience. That's why I am asking this question to seek for another solution.

Answer 1

Instead of using page reloads, you could drive the UI through Ajax. The table of students could be loaded onto a partial that could automatically be reloaded after the individual student is edited. The structure would depend highly on your own codebase, but is usually something like this:

Define a container element:

<div id="container"> ... </div>

Then call ajax from somewhere in your javascript:

$.ajax({ type: 'get', url: urlOfPage, success: function (data) {
    $('#container').html(data);
}});

Again, all of this is highly dependent on your own codebase, but this is the basic structure of a "one-page app". There are frameworks out there for this, such as Angular, React, Meteor, etc. Otherwise, when a user hits a back button, the browser will display the last page as it is cached.