我有一个表单，其中有多个代表不同事件的部门。现在我已经实现了一个功能，将从数据库中获取数据列表。每次单击每个部门都会通过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 未注册”部门时，列表正在填充，当我单击“草稿模式下的注册用户”部门时，列表正在填充。但是，如果我先单击“STPCODE 未注册”，然后在关闭窗口后单击“注册”草稿模式中的用户划分前面的列表显示。反之亦然。 请有人帮忙。
即使我这样做，注意也会改变
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');
}
}
);
}
最佳答案
您正在使用 myTable 作为全局变量并不断向其追加内容。因此 myTable 将始终具有第一次调用的值(附加第二次调用的值等)。
此外，您正在使用 htmlContent.append(myTable);，它将不断将数据附加到 div，而不会删除您第一次附加的内容。
尝试在 success 函数内声明 myTable 或在 success 函数内重置它并使用 .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);
},
关于javascript - Ajax 正在缓存表单 onclick 的先前输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25629254/