继续显示< div>页面重新加载后在表内行 [英] Keep displaying a <div> inside table row after page reload
问题描述
我有一个与某些软件交互的用户界面.
I have a user interface that interacts with some software.
我的用户界面显示带有数据路径的数据库.用户选择他们要模拟/运行的数据路径，然后将数据路径发送到软件.完成后，输出的是excel报告，该报告保存在同一台计算机上的文件夹中.这是我对应该如何向用户显示用户选择要模拟/运行的指定数据路径的excel报告的精确程度有所了解.
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.
我的想法是创建一个例程，将excel报告转换为pdf，然后将报告的文件路径保存到数据库.然后，我创建一个id为"result"的div.将显示在所选指定路径的表行内，并加载pdf_report.php，然后显示所需的报告.
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.
问题在于，每次我重新加载页面时，div标签都会消失.我尝试使用localstorage，但在页面重新加载后仍然无法显示.
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.
我的代码如下:
**让用户模拟/运行所选路径
**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>
推荐答案
在javascript中，在document.ready内部(即，在页面完全加载后立即运行)，您可以看到类似这样的内容:
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>`
}
});
当然，上面的代码期望您的体内某处已经有一个div，其ID为dataDiv:
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>
请注意，直到javascript将<a>标记粘贴在其中之前，上面的div都是不可见的(零大小==不可见).这是网页设计中非常普遍的策略-确实是通用的.
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.
如果想花哨的话，可以将JSON存储在localStorage变量中. JSON是将javascript对象转换为文本字符串(这就是为什么可以将其存储在localStorage变量中的原因)，并且您所知道的对象可以包含自己的键/值"sub-variables" ；其可以包含它们自己的子变量"等.因此，基本上，使用对象/JSON，您可以仅使用一个localStorage变量来存储项目的所有设置.或者，为简单起见，您可以对要存储的每一位信息使用单独的localStorage变量-最终结果将是相同的.
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:
为什么不是我的localStorage在我的个人计算机上的页面上持久地输入?
这篇关于继续显示< div>页面重新加载后在表内行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
