Ajax 正在缓存表单 onlick 的先前输出

我有一个表格，其中我有多个代表不同活动的部门。现在我已经实现了一个功能，它将从数据库中获取数据列表。每次单击每个分区都将通过 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 &nbsp;&nbsp;<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，而不会删除您首先附加的内容。

尝试在成功函数中声明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);
},

即使你已经给了cache:false,

缓存(默认值：true，数据类型"script"和"jsonp"为false( 如果设置为 false，它将强制浏览器不缓存请求的页面。注意：将缓存设置为 false 仅适用于 HEAD 和 GET 请求。它通过将"_={timestamp}"附加到GET参数来工作。其他类型的请求不需要该参数，但在 IE8 中，当对 GET 已请求的 URL 进行 POST 时除外。

JQuery API - AJAX

相关内容

最新更新

热门标签：