Question

我试图填充bootstrap模式中的文本。我已经将ajax响应附加到bootstrap模式，但是当有人点击select值时，数据将重复添加到bootstrap模态中。

<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');
}); 
});

实际脚本

$(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

这是jsFiddle

和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();
    });

});

为了更好的定位，我添加了<thead>和<tbody>。

当您打开模态时，<tbody>将通过调用.empty()清空，然后重新填充。此外，使用的事件是show.bs.modal

Answer 2

$(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 3

您可以将此代码添加到您的点击功能（点击ajax调用之前）：

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

<强>解释

这有效地预先重置了html表。

Answer 4

只需一个标志计数器到您的代码即可。

$(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());
});

希望它能奏效。

如何避免bootstrap模式中的数据重复

4 个答案: