ASP.Net: Birden çok Ajax isteği yürüten Görünmez Tıklama Sayacı

Question

Bir sorunum var.

<table> 
<tr data-id="34XJ-4"> 
    <td data-toggle="modal" class="modal-dialog modal-lg sorting_1" data-target="#infoModal" onclick="GetModalDetails()" style="color:darkblue; text-decoration:underline; cursor:pointer;">34XJ-4</td> 
    <td>Text34</td> 
    <td>11568</td> 
    <td>true</td> 
</tr> 
<tr data-id="34TR-8"> 
    <td data-toggle="modal" class="modal-dialog modal-lg sorting_1" data-target="#infoModal" onclick="GetModalDetails()" style="color:darkblue; text-decoration:underline; cursor:pointer;">34TR-8</td> 
    <td>Text 234234</td> 
    <td>11568</td> 
    <td>true</td> 
</tr> 
</table> 

Benim GetModalDetails JavaScript işlevi görünüyor: - Bir dataTable yapıyı aşağıdaki ile benim veritabanından gelen var (dataTable 50 ile 300 girdileri arasındaki dinamik olduğunu ben <th> etiketi gibi ve benzeri gerekli değildir bilgiler dışında kalan) gibi:

function GetModalDetails() { 
     $('tbody tr').click(
      function() { 
       var id = $(this).data('id'); 
       var JSONData = '{\'id\':' + JSON.stringify(id) + '}'; 
       makeAjaxCall(JSONData, id); 
      }); 

     function makeAjaxCall(JSONData, id) { 
      $.ajax({ 
       url: "/Test.aspx/getDetails", 
       data: JSONData, 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (msg) { 
        var result = msg; 
        document.getElementById("ModalBody").innerHTML = result.d; 
        document.getElementById("ModalHead").innerHTML = "Orderdetails " + JSON.stringify(id); 
       } 
      }) 
     } 
     return false; 
    } 

ve sonunda bir Modal, hangi açılır varken ayrıntılı Görünümler ile ilk kolona tıklayın. Ben 5 kez modal kapatıp bir sayfa yenileme olmadan başka satırın ilk sütuna tıklayın dek

<!-- Modal --> 
<div class="modal fade" id="infoModal"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h3 class="modal-title" id="ModalHead"></h3> 
      </div> 
      <div class="modal-body"> 
       <h5 class="text-center" id="ModalBody"></h5> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default " data-dismiss="modal">Close</button> 
      </div> 

     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

Şimdi bu çok iyi çalışıyor codeis.

Ağ Hata Ayıklama Araçları Chrome'uma baktığımda, ilk tıklamada ajax isteğimin doğru kimliği aldığını ve CodeBehind'deki WebMethod'a aktardığımı fark ettim. İyi çalışıyor. Ancak, modal'ı kapatıp tablodaki başka bir satırdaki başka bir ilk sütuna tıkladığımda, ajax isteği doğru kimlikle iki kez yürütülür (ancak sorun paraleldir). Üçüncü tıklamada, 4. tıklama 4 isteklerinde vb. 3 ajax istekleri yürütülecektir. (bkz. ekran görüntüsü) Screenshot

Bu nedenle Kimlik, Kod'un arkasındaki WebMethod'a verilen doğrudur, ancak sıklıkla verilir. Bu yüzden örneğin 8 tıklama, 8 benzer isteklerde yapıyorum. Ve sonra modal görünümünde zorluklar geliyor.

Bu neden oluyor ve bu "görünmez" sayacı nasıl kapatabilirim? Modal Düğmesi "Kapat" ı tıklayana kadar, başka bir Ajax İsteği başlatamıyorum.

Lütfen bana yardım edin. Eğer fonksiyonu ile TD tıkladığınızda

Answer 1

TR tıklayarak bağlama yapmamaya çalışın, sadece AJAX hizmetlerini arayın, gibi bir şey:

HTML:

<table> 
    <tr> 
     <td data-id="34XJ-4" data-toggle="modal" class="modal-dialog modal-lg sorting_1" data-target="#infoModal" onclick="GetModalDetails()" style="color:darkblue; text-decoration:underline; cursor:pointer;">34XJ-4</td> 
     <td>Text34</td> 
     <td>11568</td> 
     <td>true</td> 
    </tr> 

JAVASCRIPT:

function GetModalDetails() 
    { 
    var id = $(this).data('id'); 
    var JSONData = '{\'id\':' + JSON.stringify(id) + '}'; 
    makeAjaxCall(JSONData, id); 
    } 
    function makeAjaxCall(JSONData, id) { 
     $.ajax({ 
      url: "/Test.aspx/getDetails", 
      data: JSONData, 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (msg) { 
       var result = msg; 
       document.getElementById("ModalBody").innerHTML = result.d; 
       document.getElementById("ModalHead").innerHTML = "Orderdetails " + JSON.stringify(id); 
      } 
     }) 
    } 
    return false; 
}