How to handle a back from editing a table record in a separate Div section via the browser back button

I wrote a simple database page using JavaScript (jQuery). In the main view there is a table with data (in one div), and in the other div there is editing view(in the same index.html file). This second div is initially hidden. After clicking on the record, it opens and you can close it after clicking “Save” or “Cancel”. And it basically works. The problem is, I didn’t really think what to do, if I clicked the back button in my browser. Right now, when I click from an edit record item, it takes me back from the entire page at all. I wish it would just take me back to table view, so that the editing div would close/clear.

What is a good approach in this functionality? Below is a very simplified page to illustrate what I mean.

<html>
  <head>
      <meta name="viewport" content="width=device-width"/>
      <title>Index</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
  </head>
<style>
  #EditDiv
  {
    background-color: blanchedalmond;
  }
  #DetailsDiv
  {
    background-color:burlywood;
    font-size: 30px;
    width: 50%;
  }
  #SaveButton
  {
    background-color:indianred;
    font-size: 30px;
    width: 100%;
  }

  .box{
        width: 100%;
        height: 100%;
        position: absolute;
        top: -80px; 
        left: 0;
        background-color: rgb(243, 229, 229);
        overflow:auto;
        border-style: solid;
        border-width: thin;
        border-color: lightsteelblue;
}


</style>

<body>
<div id="TableDiv">
    <table id="testtable" style="width:50%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>Anna</td>
        <td>Thompson</td>
        <td>20</td>
      </tr>
    </table> 
</div>
<div id="DetailsDiv" class="box stack-top" >
  <p style="font-size: 30px; font-weight: bold;">
    Edit row
  </p>
  <button id="SaveButton" onclick="Save()" >SAVE</button>
  <div id="EditDiv"></div>
</div>
</body>
<script>
      $('#DetailsDiv').hide();

      $("#testtable tr").click(function() {
        $( "#EditDiv" ).empty();
        $( "#EditDiv" ).append( $(this).children("td").html());
        $('#DetailsDiv').show();   

        const state = { 'page_id': 1}
        const title = ''
        const url = 'index5.html#' + $(this).children("td")[0].textContent;
        history.pushState(state, title, url)
    });

    function Save()
    {
      $( "#EditDiv" ).empty();
      $('#DetailsDiv').hide();
    }
</script>
</html>

Answer

This isn’t the expected functionality of the browser back button. The back button should be reserved for allowing the user to go to a previous webpage URL before yours. Preventing this functionality would be a bad experience for your user and should be avoided.

You could implement “routing” in your application. When the user clicks “Edit”, you could use the History pushState API to change your URL to /page/edit, and when the user saves change it back to /page/. This would then justify changing state when the user clicks the back button.

Implementing this properly is outside the scope of this single question, however.

Advertisement

Answer