Wie zu vermeiden, Datenwiederholung in Bootstrap-modal

Question

Ich versuche, den Text aus dem Bootstrap-Modal zu füllen. Ich habe die Ajax-Antwort an das Bootstrap-Modal angehängt, aber wenn jemand auf den Select-Wert klickt, werden die Daten wiederholt dem Bootstrap-Modal hinzugefügt.

Hier ist meine Geige http://jsfiddle.net/mwfbs3bk/10/

<div> 
<label for="name" style="margin: 0px;">EMP NAME</label> 
<input type="text" class="input-normal" id="empname" style="line-height: initial; margin-left: 6px;"> 


<button type="button" id="nameValue" class="btn btn-primary btn-xs" href="#fee-details" data-toggle="modal">Select Value</button> 
</div> 

<div class="modal fade" id="fee-details" tabindex="-1" role="dialog" aria-labelledby="fee-details-label" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
      <table id="records_table"> 
    <tr> 
     <th>Rank</th> 
     <th>Content</th> 
     <th>UID</th> 
    </tr> 
</table>   
     </div> 
    </div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 

$(document).ready(function(){ 
    $("#nameValue").click(function(){ 

    var response = '[{"rank":"9", "content":"Alon", "UID":"5" }'; 
response += ',{"rank":"6","content":"Tala","UID":"6"}]'; 
response = $.parseJSON(response); 

$(function() { 
    $.each(response, function (i, item) { 
     $('<tr>').append(
     $('<td>').text(item.rank), 
     $('<td>').text(item.content), 
     $('<td>').text(item.UID)).appendTo('#records_table'); 
     $("#records_table tbody td").on('click', function() {     $("#empname").val($(this).text());  
     $('#fee-details').modal('hide'); 
       }); 
    }); 
}); 

    }); 

    $('body').on('hidden.bs.modal', '.modal', function() { 
    $(this).removeData('bs.modal'); 
}); 
}); 

Actual Skript

$(document).ready(function() { 

     $('#getReferenceID').click(function() { 
      $("#myModal1").on("show.bs.modal", function(){ 
       $("#records_table tbody").empty(); 
      var selectedClass = $("#className option:selected").val(); 
      var selectedExamType = $("#examType option:selected").val(); 
       if (selectedClass === ""&& selectedExamType === "") { 
        alert('Please Select Above two dropdowns'); 
        return false; 
        } 

       else 

        { 

           $.ajax({ 
             type : 'POST', 
             url : 'searchStudentToEditMarks', 
             dataType : 'JSON', 
             data : { 
              className : $("#className option:selected").val(), 
              examType : $("#examType option:selected").val() 
               }, 
            success : function(data,success) { 
             alert(success); 
             console.log(data) 


             $.each(data,function(index) {           
              var newRowContent = "<tr><td>"+data[index]+"</td></tr>"; 
              $("#records_table tbody").append(newRowContent); 
              $("#records_table tbody td").on('click', function() { 

               alert($(this).text()); 
               $("#studentReferencID").val($(this).text()); 
               $("#myModal1").modal('hide'); 
              }) 



             }); 

            }, 
           }); 

          } 
         }); 
       }); 
     }); 

Answer 1

Hier ist ein jsFiddle

Und die JS:

$(document).ready(function(){ 
    $("#fee-details").on("show.bs.modal", function(){ 
     var response = '[{"rank":"9", "content":"Alon", "UID":"5" }'; 
     response += ',{"rank":"6","content":"Tala","UID":"6"}]'; 
     response = $.parseJSON(response); 

     $(function() { 
      $.each(response, function (i, item) { 
       $('<tr>').append(
       $('<td>').text(item.rank), 
       $('<td>').text(item.content), 
       $('<td>').text(item.UID)).appendTo('#records_table tbody'); 

      }); 
     }); 
    }); 

    $("#fee-details").on("hidden.bs.modal", function(){ 
      $("#records_table tbody").empty(); 
    }); 

}); 

ich eine <thead> und <tbody> für ein besseres Targeting hinzugefügt.

Wenn Sie das Modal öffnen, wird <tbody> durch Aufrufen von .empty() geleert und dann erneut gefüllt. Außerdem ist das verwendete Ereignis show.bs.modal

Answer 2

Sie diesen Code auf Ihre Klickfunktion (Bevor Sie hier klicken, Ajax-Aufruf) hinzufügen könnte:

$("#records_table").html("<tr><th>Rank</th><th>Content</th><th>UID</th></tr>") 

Erläuterung:

Dadurch wird die HTML-Tabelle im Voraus zurückgesetzt.

Answer 3

Nur eine Flagge Zähler zu Ihrem Code wird es funktionieren.

$(document).ready(function(){ 
    var counter=0; 
    $("#nameValue").click(function(){ 
if(counter<1){ 
    var response = '[{"rank":"9", "content":"Alon", "UID":"5" }'; 
response += ',{"rank":"6","content":"Tala","UID":"6"}]'; 
response = $.parseJSON(response); 

$(function() { 
    $.each(response, function (i, item) { 
     $('<tr>').append(
     $('<td>').text(item.rank), 
     $('<td>').text(item.content), 
     $('<td>').text(item.UID)).appendTo('#records_table'); 

    }); 
}); 
    }  
    counter++; 
    alert(counter); 
    }); 
}); 


$("#records_table tbody td").on('click', function() { 
alert('hi'); 
    $("#empname").val($(this).text()); 
}); 

Ich hoffe, es wird funktionieren.

Answer 4

$(document).ready(function() {   
    $('#getReferenceID').click(function() { 
     $("#myModal1").on("show.bs.modal", function(){ 
      $("#records_table tbody").empty(); 
     }); 
     var selectedClass = $("#className option:selected").val(); 
     var selectedExamType = $("#examType option:selected").val(); 
     if (selectedClass === ""&& selectedExamType === "") { 
      alert('Please Select Above two dropdowns'); 
      return false; 
     } 
     else 
     { 
      $.ajax({ 
       type : 'POST', 
       url : 'searchStudentToEditMarks', 
       dataType : 'JSON', 
       data : { 
        className : $("#className option:selected").val(), 
        examType : $("#examType option:selected").val() 
       }, 
       success : function(data,success) { 
        alert(success); 
        console.log(data) 

        $.each(data,function(index) {           
         var newRowContent = "<tr><td>"+data[index]+"</td></tr>"; 
         $("#records_table tbody").append(newRowContent); 

         $("#records_table tbody td").on('click', function() { 
          alert($(this).text()); 
          $("#studentReferencID").val($(this).text()); 
          $("#myModal1").modal('hide'); 
         }) 
        });         
       }, 
      }); 
     } 
    }); 
});