时间戳

首页 > 解决方案 > 继续显示一个

页面重新加载后的表行内

php - 继续显示一个
页面重新加载后的表行内

问题描述

我有一个与某些软件交互的用户界面。

我的用户界面显示带有数据路径的数据库。用户选择他们想要模拟/运行的数据路径，然后将数据路径发送到软件。完成后，输出是保存在同一台计算机上的文件夹中的 Excel 报告。这是我对我应该如何准确地向用户显示用户选择模拟/运行的指定数据路径的 excel 报告感到有点困惑。

我的想法是创建一个例程，将 excel 报告转换为 pdf，然后将报告的文件路径保存到数据库。然后，我创建一个 id="result" 的 div，以显示在所选指定路径的表格行内，并加载 pdf_report.php，然后显示所需的报告。

问题是每次我重新加载页面时 div 标签都会消失。我尝试使用 localstorage，但在页面重新加载后它仍然没有显示。

我的代码如下：

**让用户模拟/运行选择的路径

搜索.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>

标签： phpjquerylocal-storage

解决方案

在 javascript 中，在 document.ready 中（即在页面完全加载后立即运行），您可以使用以下内容：

$(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>`
   }
});

当然，上面的代码期望你的身体某处已经有一个 ID 为 div dataDiv：

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

请注意，在 javascript 将<a>标签粘贴在其中之前，上面的 div 将是不可见的（零大小 == 不可见）。这是网页设计中非常常见的策略 - 确实是通用的。

如果您想花哨，可以将 JSON 存储在 localStorage 变量中。JSON 是一个转换为文本字符串的 javascript 对象（这就是它可以存储在 localStorage 变量中的原因），并且如您所知，对象可以包含自己的键/值“子变量”，其中可以包含自己的“子变量”等...因此，基本上，使用对象/JSON，您可以只使用一个 localStorage 变量来存储项目的所有设置。或者，为了简单起见，您可以为要存储的每一位信息使用单独的 localStorage 变量——最终结果将是相同的。

这些参考资料可能会有所帮助：

从按钮单选设置 localStorage 中的 var 并将其传递给其他页面

为什么我的 localStorage 输入在我的个人计算机上的页面之间不持久？

如何从 LocalStorage 中检索值

localStorage 什么时候清零？

推荐阅读