Keep displaying a inside table row after page reload

Question

I have a user interface that interacts with some software.

My user interface displays a database with data paths. The user selects the data paths they want to simulate/run, and that sends the data path to the software. After its finished the output is an excel report saved in a folder on the same computer. This is were I'm a bit stuck on how exactly I'm supposed to show the excel report to the user for the specified data path the user selected to simulate/run.

My idea was to create a routine that converts the excel report to pdf and then saves the file path of the report to a database. I then create a div with id="result" to be displayed inside a table row for the specified path selected and loads pdf_report.php which then displays the desired report.

The problem is that every time I reload the page the div tag goes away. I tried using localstorage but it still doesn't get displayed after page reload.

My code is the following:

**Lets the user simulate/run the path selected

Search.php

<?php
...    
  while($row = $result->fetch_assoc()){
            $field1name = $row["test_id"];
            $field2name = $row["path"];
            $field3name = $row["video1_path"];
            $field4name = $row["video2_path"];
            $field5name = $row["video3_path"];
            $field6name = $row["video4_path"];

          echo "<tr>
                  <td> ".$field1name." </td>
                  <td> ".$field2name." </td>
                  <td> ".$field3name." </td>
                  <td> ".$field4name." </td>
                  <td> ".$field5name." </td>
                  <td> ".$field6name." </td>

                  <td><div>
                        <button class='edit' id='" . $row['test_id'] . "'  >Run</button>
                      </div></td>

                  <td><div id='result'>
                    <p></p>
                  </div></td>


                </tr>";
        }
      }else {
        echo '<span style="color:#ff0000;text-align:center;">No Test ID Selected!</span>';
      }
    }


    // Close connection
    mysqli_close($conn);
  ?>
  </table>
</div><br>

<div style="overflow-x:auto;">
<table id=test_data>
  <tr>
    <th>Progress</th>
    <th>Progress Status</th>
  </tr>
  <tr>
    <td><div><progress id='progBar' value='0' max='100'></progress></div></td>
    <td><div><p id='progress-text'></p></div></td>
  </tr>
</table>
</div>


<script type="text/javascript">
var show = localStorage.getItem('showDiv');
    if(show === 'true'){
        $("#result").show();
    }

</script>

<!--Uses jquery to run 3 scripts and displays it in a progress bar-->
<script>
$(document).on('click', '.edit', function(event){

  //set cookie value to 'path'
  var fcookie='mycookie';

  //if button inside row is clicked the path gets saved to a cookie and received in ajax.php
  var test_id = $(this).attr('id');
  if(test_id) {
    var path = $(this).closest('tr').find("td:nth-child(2)").text();

  //Cookie gets saved
  document.cookie='fcookie='+path;


  var $this = $(this);

    //Start of 1st script
      $.ajax({
        url: "ajax.php",
        type:"POST",
        success: function(data) {
          //alert("File 1 Completed")

            $("#progress-text").text("Executing file 1");
            $('#progBar').val(25);

            //Start of 2nd script
            $.ajax({
              url: "ajax2.php",
              type:"POST",
                success: function(data2) {
                  //alert("File 2 Completed")
                  $("#progress-text").text("Executing file 2");
                  $('#progBar').val(50);

                  //Start of 3rd script
                  $.ajax({
                    url: "ajax3.php",
                    type:"POST",
                      success: function(data3) {
                        //alert("File 2 Completed")
                         $("#progress-text").text("Complete");
                         $('#progBar').val(100);

                         //Displays the <div id=result> for the selected data path
                         $this.closest("tr").find("td:nth-child(8)").load("pdf_report.php");


                         event.preventDefault();
                         $("#result").show();
                         localStorage.setItem('showDiv', true);


                      }
                  });
                }
            });
          }
    });
  }
});

 </script>

Answer 1

In javascript, inside document.ready (i.e. runs as soon as the page has been fully loaded), you can have something like:

$(function(){
   const tmp1 = localStorage.get('pdf01');
   const tmp2 = localStorage.get('pdf02');
   if (tmp1 !== undefined){
      $('#dataDiv').append(`<a href="${tmp1}">PDF01</a>`
   }
   if (tmp2 !== undefined){
      $('#dataDiv').append(`<a href="${tmp2}">PDF02</a>`
   }
});

Of course, the above code expects that you already have a div somewhere in your body with the ID dataDiv:

<body>
   <!-- Other HTML code is here... -->
   <div id="dataDiv"></div>
</body>

Note that the above div will be invisible (zero size == invisible) until the javascript sticks the <a> tag inside it. This is a pretty common strategy in web design - universal, really.

If you want to get fancy, you can store JSON in a localStorage variable. JSON is a javascript object converted to a text string (which is why it can be stored in a localStorage variable), and objects, as you known, can contain their own key/value "sub-variables", which can contain their own "sub-variables", etc... So, basically, using objects/JSON you can use just one localStorage variable to store all the settings for your project. Or, to stay simple, you can just use a separate localStorage variable for each bit of information you want to store -- and the end result will be the same.

These References might be helpful:

Setting a var in localStorage from button radio and pass it to other pages

Why aren't my localStorage inputs persistent across pages on my personal computer?

How to retrieve the value from LocalStorage

When is localStorage cleared?