【发布时间】：2014-08-12 12:55:39
【问题描述】：
过去 2 小时我都在苦苦挣扎。
试过了：
location.reload();
reset form
许多功能，但是在我关闭弹出窗口并重新打开或打开另一个 id 时……我以前的 id 数据仍然在那里看到，并且对于所有 id 都是连续的。
风格：
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.content a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.content{
min-width: 800px;
width: 900px;
min-height: 150px;
margin: 0px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.content p{
clear: both;
color: #555555;
text-align: justify;
}
.content p a{
color: #d91900;
font-weight: bold;
}
.content .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.content .x:hover{
cursor: pointer;
}
jQuery/ajax：
下面是我的弹出框 + ajax 在输入字段下获取和显示记录
$('#class').on('click delegate mouseenter', 'a', function (e) {
var data = dt.row( $(this).parents('tr') ).data();
var valuea = data[1];
$(function(){
e.preventDefault();
var table = $('#class').DataTable();
var overlay = $('<div id="overlay"></div>');
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
location.reload();
resetForms();
$("span.ajax_loader").hide(); // success
var pathlaser = "server_processing_laser.php";
tablel.clear();
tablel.draw();
tablel.ajax.url(pathlaser).load();
return false;
});
$('.xclose').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
location.reload();
resetForms();
$("span.ajax_loader").hide(); // success
var pathlaser = "server_processing_laser.php";
tablel.clear();
tablel.draw();
tablel.ajax.url(pathlaser).load();
return false;
});
// POPUP BOX
$('.click_'+data[0]+'').click(function(e){e.preventDefault();
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$("div.note_msg").hide();
$('.popup .id').val(valuea);
// FETCHING DATA TO SHOW
$.ajax({
type:"GET",
url:"fetchrecord.php",
data:{
valuea:valuea,
},
async: false,
success:function(html){
$("#display").after(html);
}
});
return false;
});
});
});
});
下面是弹出代码：
<div class='popup'>
<div class='content'>
<a href='' class="xclose"><img src='../datatables/media/images/close.png' alt='quit' class='x' id='x' /> </a>
<p>
<form method="post" action="" id="feedback_form">
<div class="langtrx_fr" align="center">
<table align="center">
<div id="display"></div>
</table>
</div>
</form>
<span class="ajax_loader"></span>
<table align="center"><tr><td> <a href='' class='close'><strong>Close</strong></a> </td></tr> </table>
</p>
</div>
</div>
fetchrecord.php
$valuepktid = $_REQUEST['valuea'];
$sql = "SELECT stoneone,stonetwo,stone3,loss FROM stone
WHERE pid = ".db_escape($valuepktid)."
GROUP BY id";
$resultpkt = mysqli_query($db,$sql);
$abpkt = mysqli_fetch_array($resultpkt);
?>
<?php
?>
<tr>
<td class="label">Stone 1 :</td>
<td class="form">
<input name="stoneone" id="stoneone" readonly value="<?php echo $abpkt['stoneone'];?>" class="stoneone" autocomplete="off" type="number"/>
</td>
</tr>
<tr>
<td class="label">Stone 2 :</td>
<td class="form"><input name="stonetwo" readonly value="<?php echo $abpkt['stonetwo'];?>" class="stonetwo" autocomplete="off" type="number" /></td>
</tr>
<tr>
<td class="label">Loss :</td>
<td class="form"><input name="loss" readonly value="<?php echo $abpkt['loss'];?>" class="loss" value="" autocomplete="off" type="number" /></td>
</tr>
一切正常……我的意思是我正在获取数据
但是当我关闭并打开任何其他 ID 时，弹出窗口会在 tr/td 数据上方显示两次。 表示最新数据和我关闭的旧数据。 我尝试重新加载页面以获取新数据，但有时它会显示正确的数据，有时会显示旧数据的倍数。
我认为它与 DIV 的缓存有关。在弹出窗口关闭后保持不变。
弹出链接： Jquery Datatables : Jquery Popup Box not working under function - php mysql
有什么想法请帮忙
【问题讨论】：
标签： javascript php jquery mysql ajax