2014-09-02 2 views
1

У меня есть форма, где у меня есть несколько делений, которые представляют собой различную активность. Теперь я реализовал функцию, которая получит список данных из базы данных. Каждый щелчок по каждому разделу будет заполнять данные из базы данных с помощью ajax-вызова. Я правильно реализовал функциональность, я получаю данные из базы данных при каждом нажатии на деление через вызов ajax. Но моя проблема заключается в том, что каждый раз, когда форма загружается, я нажимаю разделение, разделение получает данные через ajax-вызов и показывает, что данные являются модальным окном, но теперь, когда я нажимаю на другое подразделение, заполняется один и тот же набор данных. Проблема в том, что любое деление, которое сначала щелкнуло, заполняет соответствующий набор данных этого подразделения, и когда мы нажимаем на другое подразделение, отображаются предыдущие данные. Это мой код.Ajax кэширует предыдущий вывод формы onlick

<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 НЕ ЗАРЕГИСТРИРОВАНЫ деление, то список заполняемых, когда я нажимаю на ЗАРЕГИСТРИРОВАННЫХ ПОЛЬЗОВАТЕЛЕЙ В черновом режиме разделения затем список populating.But, если я нажму 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'); 
       } 
      } 
    ); 

}

+0

есть кто-нибудь какие-либо идеи по этому поводу ??? – lucifer

ответ

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); 
}, 
+0

никаких изменений нет, я сделал в соответствии с вами – lucifer

+0

Я не понимаю, почему он кэширует данные, пожалуйста, помогите – lucifer

+0

Могу ли я проверить текущую временную привязку перед вызовом действий? – lucifer

0

Даже если вы дали cache:false,

кэш (по умолчанию : true, false для dataType 'script' и 'jsonp') Если установлено значение false, это заставит запрашиваемые страницы не кэшироваться браузера. Примечание. Установка кеша в false будет работать только с запросами HEAD и GET. Он работает, добавляя «_ = {timestamp}» к параметрам GET. Параметр не нужен для других типов запросов, за исключением IE8, когда POST отправляется по URL-адресу, который уже был запрошен GET.

JQuery API - AJAX