我有一个表单，其中我有多个分区代表不同的活动。现在我已经实现了一个功能，它将从数据库中获取数据列表。每个分区的每次点击将通过ajax调用从数据库中填充数据。已经正确实现了功能，我通过ajax调用每次点击分区时从数据库中获取数据。但我的问题是，每次加载表单时，我点击一个部门，部门通过ajax调用获取数据并显示数据是一个模态窗口，但现在当我点击另一个分区时，相同的数据集将被填充。问题是，首先点击的任何分区将填充该分区的相应数据集，当我们点击另一个分区时以前的数据显示..这是我的代码..
<script>
function getUnUsedSTPCode(id){
var WindowHeader = "STP CODE LIST";
var htmlContent = $("#dashBoardDetails");
var myTable = "<table>";
$.ajax(
{
url: "getDashBoardData.do?method=getUnUsedSTPCode",
type: 'POST',
cache: false,
dataType: 'json',
data:{"storeId":id},
beforeSend: function()
{
},
success: function(data, textStatus, xhr)
{
$.each(data, function(i, obj) {
myTable += "<tr><td>"+obj+"<//td><//tr>";
});
myTable += "<//table>" ;
htmlContent.append(myTable);
openWindow(WindowHeader);
},
error: function(xhr, textStatus, errorThrown)
{
alert('error');
}
}
);
}
</script>
<script>
function getUserStatusInfo(status){
var WindowHeader = "REGISTERED USERS IN DRAFT MODE";
var htmlContent = $("#dashBoardDetails");
var myTable = "<table>";
$.ajax({
url:"getDashBoardData.do?method=getRegisteredUserDetail",
type:'POST',
cache:false,
dataType:'json',
data:{"status":status},
beforeSend:function(){
},
success:function(data,textStatus,xhr){
var i=0;
$.each(data, function(i, obj) {
var row="";
if(i%2==0)
row= "<tr class='even'>";
else
row= "<tr class='odd'>";
row += "<td>"+obj.firstName+"<//td>"+"<td>"+obj.lastName+"<//td>"+"<td>"+ obj.loginName +"<//td>"+ obj.orgContactid +"<//td>"+ obj.loginName +"<//td>";
row +="<//tr>";
myTable +=row;
i++;
});
myTable += "<//table>" ;
htmlContent.append(myTable);
openWindow(WindowHeader);
},
error:function(xhr,textStatus,errorThrown){
alert('error');
}
});
}
</script>
<form action="/getDashBoardData" name="tmlDashBoardForm" method="post" id="DashBoardData" >
<div id="wrapper">
<div id="content">
<div class="demo">
<h2 align="center">DASHBOARD</h2>
<h3 class="expand collapse-close" onclick="getUnUsedSTPCode('100')">STPCODE NOT REGISTERED <img src="images/rr.png"/> <bean:write name="adminDashBoard" property="unUsedSTPCodeCount" /> <span></span> </h3>
<div class="collapse">
</div>
<h3 class="expand collapse-close" onclick="getUserStatusInfo('D')">REGISTERED USERS IN DRAFT MODE <img src="images/rr.png"/><bean:write name="adminDashBoard" property="draftUserCount" /> <span></span> </h3>
<div class="collapse">
<p>List of user in draft mode are here</p>
</div>
<h3 class="expand collapse-close">PAYMENT INITIATED FOR USERS <img src="images/rr.png"/><bean:write name="adminDashBoard" property="paymentInitiatedCount" /><span></span> </h3>
<div class="collapse">
<p>Total number of users who have their payment initiated</p>
</div>
<h3 class="expand collapse-close"> PAYMENT RECIEVED FOR USERS <img src="images/rr.png"/><bean:write name="adminDashBoard" property="paymentReceivedCount" /> <span></span> </h3>
<div class="collapse">
<p>Total number of users who have their payment received</p>
</div>
<h3 class="expand collapse-close">PAYMENT DISAPPROVED FOR USERS <img src="images/rr.png"/><bean:write name="adminDashBoard" property="paymentDisApprovedCount" /><span></span> </h3>
<div class="collapse">
<p>Total number of users who have their payment disapproved</p>
</div>
<h3 class="expand collapse-close">NUMBER OF ACTIVE USERS <img src="images/rr.png"/><bean:write name="adminDashBoard" property="activeUserCount" /><span></span> </h3>
<div class="collapse">
<p>Total number of users who are active</p>
</div>
<h3 class="expand collapse-close">PAYMENT REALIZED WAITING FOR APPROVAL <img src="images/rr.png"/><bean:write name="adminDashBoard" property="paymentApprovalWaitingCount" /><span></span> </h3>
<div class="collapse">
<p>PAYMENT REALIZED WAITING FOR APPROVAL</p>
</div>
<h3 class="expand collapse-close">PAYMENT RECEIVED WAITING FOR CLEARANCE <img src="images/rr.png"/><bean:write name="adminDashBoard" property="paymentWaitingForClearence" /><span></span> </h3>
<div class="collapse">
<p>PAYMENT RECEIVED, WAITING FOR CLEARANCE</p>
</div>
<h3 class="expand collapse-close">PAYMENT REJECT <img src="images/rr.png"/><bean:write name="adminDashBoard" property="payementRejectedCount" /><span></span> </h3>
<div class="collapse">
<p> PAYMENT REJECT</p>
</div>
<h3 class="expand collapse-close"> PAYMENT FAILED <img src="images/rr.png"/><bean:write name="adminDashBoard" property="payementFailedCount" /><span></span> </h3>
<div class="collapse">
<p> PAYMENT FAILED</p>
</div>
</div>
</div>
</div>
<div id="modalalertdiv" style="display:block;">
<div style="background: #F3F3F3; height: 100%; padding: 5px ; overflow: scroll" id="dashBoardDetails" >
</div>
</div>
</form>
当我点击STPCODE NOT REGISTERED分区然后列表填充，当我点击注册用户在草案模式分区然后列表填充。但是如果我点击STPCODE NOT REGISTERED首先然后关闭窗口，如果我点击REGISTERED模式划分的用户显示前一个列表。反之亦然。 有人请帮忙。
即使我这样做，注意也在改变
function getUnUsedSTPCode(id){
var WindowHeader = "STP CODE LIST";
var htmlContent = $("#dashBoardDetails");
$.ajax(
{
url: "getDashBoardData.do?method=getUnUsedSTPCode",
type: 'POST',
cache: false,
dataType: 'json',
data:{"storeId":id},
beforeSend: function()
{
},
success: function(data, textStatus, xhr)
{
var myTable = "<table>";
$.each(data, function(i, obj) {
myTable += "<tr><td>"+obj+"<//td><//tr>";
});
myTable += "<//table>" ;
htmlContent.html(myTable);
openWindow(WindowHeader);
},
error: function(xhr, textStatus, errorThrown)
{
alert('error');
}
}
);
}
答案 0 :(得分：0)
您正在使用myTable作为全局变量并不断追加它。因此myTable将始终具有第一个调用的值（附加第二个调用的值等）。
此外，您正在使用htmlContent.append(myTable);，它会不断地将数据附加到div，而不会删除您首先添加的内容。
尝试在成功函数中声明myTable或在成功函数中重置它并使用.html代替.append：
success: function(data, textStatus, xhr)
{
var myTable = "<table>";
$.each(data, function(i, obj) {
myTable += "<tr><td>"+obj+"<//td><//tr>";
});
myTable += "<//table>" ;
htmlContent.html(myTable);
openWindow(WindowHeader);
},
答案 1 :(得分：0)
即使您已经提供了cache:false,
缓存（默认值：true，false表示dataType'script'和'jsonp'） 如果设置为false，它将强制浏览器不缓存请求的页面。 注意：将缓存设置为false只能与HEAD和GET请求一起正常工作。 它的工作原理是将“_ = {timestamp}”附加到GET参数。其他类型的请求不需要该参数，但在IE8中，当对已经由GET请求的URL进行POST时，该参数除外。