带动态内容的Bootstrap Modal加载最后的数据

Question

我有一个表，当我点击保存时，它将获取第一列中的所有输入字段，并检查数据库中是否已存在数据。如果条件为真，则每行显示一个图标。当我点击该图标时，与该特定数据相关的信息将显示为引导模式。

我整天都在研究我的问题。我首先尝试只使用一个数据。当我得到我想要的东西时，我开始研究多种数据。

当检查多个数据且它们是重复数据时，即使有2个或更多数据，也只显示最后一个信息。

这是我的代码：

保存按钮：

$( "#save_Boxes" ).click(function() {
    $.ajax({
        type: "POST", 
        url: window.base_url+'oss/admin/check_receive_data', 
        data: $.param($('form#receiving-form').serializeArray()),
        dataType : 'JSON',
        success: function (response) {
            var new_arr = response.receive_array;
            console.log(new_arr);
            var no_duplicate = 0;
            //THIS IS WHERE THE  PROCESS SHOULD TAKE PLACE
            $('table#receiving-box-table tbody tr').each(function(index){ 
                var ctno = $(this).find('td:first input').val(); // get courier trancking

                var td_id = $(this).find('td:last button.duplicate-data').attr('id');
                var target = $(this).find('td:last button.duplicate-data').attr('data-target');

                // check if ctno is present in response array or not
                var arr = $.grep(response.receive_array, function( n ) {
                   return ( n.courier_tracking_no === ctno);
                });
                if(arr.length){ // if present then show error message
                   // alert('wsdds');
                   no_duplicate = 1;
                   $(this).find('td:first input').attr('disabled', 'disabled');
                   $('button#'+td_id).show(); // let it be hidden by default
                   $(this).find('td:first input').closest('td').addClass('has-error');
                }

               var new_ctno = $('button#'+td_id).closest('tr').find('td:first input').val();
               $.each(new_arr, function(idx, obj){ 
                    console.log(idx + ": " + obj.courier_tracking_no);
                    console.log(target);
                    $(target).on('hidden.bs.modal', function(){
                                $(target+' .modal-title').html('');
                                $(target+' .modal-body').html('');
                            });
                    $('button#'+td_id).off('click').on('click', function(){
                        $(target).load(window.base_url+'oss/admin/box_duplicate',
                            function(){
                                $(target+' .modal-title').html('Duplicate Courier Tracking Number - '+obj.courier_tracking_no);
                                $(target+' .modal-body').html("<p class='text-left'>This box already exists. Please delete.</p><table class='table table-hover table-bordered table-striped'><tbody><tr><th scope='row'>Batch No.</th><td>"+obj.batch_no+"</td></tr><tr><th scope='row'>Courier Name</th><td>"+ucword(obj.courier_name)+"</td></tr><tr><th scope='row'>Vendor Name</th><td>"+ucword(obj.vendor_name)+"</td></tr><tr><th scope='row'>Status</th><td>"+ucword(obj.status)+"</td></tr></tbody></table>");
                                 $(target).modal('show');
                        });
                    });
                });

            });
            if(no_duplicate == 0){
                var check_if_empty = 0;
                $('input[name^="courier_tracking_no[]"]').each(function(){
                    if($(this).val() != ""){
                        check_if_empty += 1;
                    }
                });
                if(check_if_empty > 0){
                    $('#receiving-form').submit();
                }
            }
        },
            error: function (MLHttpRequest, textStatus, errorThrown) {
            console.log("There was an error: " + errorThrown);  
        }
    });
});

html表：

<table id="receiving-box-table" class="table table-hover table-bordered table-striped">
    <thead>
        <tr>
            <th>Courier Tracking #</th>
            <th>Courier</th>
            <th>Vendor</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" form="receiving-form" class="form-control input-sm track_no" name="courier_tracking_no[]" id="courier_tracking_no_1" /></td>
            <td><input type="text" form="receiving-form" class="form-control input-sm" name="courier_name[]" id="courier_name_1" onkeypress="if (event.keyCode == 13) {return false;}"/></td>
            <td><input type="text" form="receiving-form" class="form-control input-sm" name="vendor_name[]" id="vendor_name_1" onkeypress="if (event.keyCode == 13) {return false;}"/></td>
            <td class="box-action"><button class="btn btn-danger btn-xs clear-data" data-toggle="tooltip" data-placement="right" title="Clear input fields"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button> <button style="display:none;" id="dup-0" data-toggle = "modal" data-target = "#dupli-modal-0" class="btn btn-warning btn-xs duplicate-data" title="Duplicate Data"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></button><div class = "modal fade" id = "dupli-modal-0" tabindex = "-1" role = "dialog" aria-labelledby = "dupli-modal-0Label" aria-hidden = "true"></div></td>
        </tr>
    </tbody>
</table>

注意：仅显示第一行，因为动态创建了以下行。

html模式：

<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
    </div>
    <div class="modal-body">
        <div class="row" style="margin-left: 0; margin-right: 0;">
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
    </div>
</div>

我错过了什么？即使模态仅来自1个文件，它也有唯一的ID，所以它不应该是一个问题。

感谢您的帮助！ -Eli

Answer 1

我尝试了不同的方法。我没有调用url（我使用CI）并显示包含模态模板的文件，而是直接在我的代码中添加了模板：

$( "#save_Boxes" ).click(function() {
    $.ajax({
        type: "POST", 
        url: window.base_url+'oss/admin/check_receive_data', 
        data: $.param($('form#receiving-form').serializeArray()),
        dataType : 'JSON',
        success: function (response) {
            var new_arr = response.receive_array;
            console.log(new_arr);
            var no_duplicate = 0;
            //THIS IS WHERE THE  PROCESS SHOULD TAKE PLACE
            var stored =    [];
            $('table#receiving-box-table tbody tr').each(function(index){ 
                var ctno = $(this).find('td:first input').val(); // get courier trancking
                var td_id = $(this).find('td:last button.duplicate-data').attr('id');
                var target = $(this).find('td:last button.duplicate-data').attr('data-mod_id');
                stored.push(target);    
                var arr = $.grep(response.receive_array, function( n ) {
                   return ( n.courier_tracking_no === ctno);
                });
                if(arr.length){ // if present then show error message
                   // alert('wsdds');
                   no_duplicate = 1;
                   $(this).find('td:first input').attr('readonly', 'readonly');
                   $('button#'+td_id).show(); // let it be hidden by default
                   $(this).find('td:first input').closest('td').addClass('has-error');
                }
            });
            $('div.modal_holder').html('');
            all_modals = '';
            var modal_list = $.each(new_arr, function(idx, obj){
                    all_modals += "<div class = 'modal fade' id = '"+stored[idx]+"' tabindex = '-1' role = 'dialog' aria-labelledby = '"+stored[idx]+"Label' aria-hidden = 'true'><div class='modal-dialog'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal'>&times;</button><h4 class='modal-title'></h4></div><div class='modal-body'><div class='row' style='margin-left: 0; margin-right: 0;'><p class='text-left'>This box already exists. Please delete.</p><table class='table table-hover table-bordered table-striped'><tbody><tr><th scope='row'>Batch No.</th><td>"+obj.batch_no+"</td></tr><tr><th scope='row'>Courier Name</th><td>"+obj.courier_name+"</td></tr><tr><th scope='row'>Vendor Name</th><td>"+obj.vendor_name+"</td></tr><tr><th scope='row'>Status</th><td>"+obj.status+"</td></tr></tbody></table></div></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Ok</button></div></div></div></div>";
                });
            $('div.modal_holder').html(all_modals);
            console.log(no_duplicate);
            if(no_duplicate == 0){
                var check_if_empty = 0;
                $('input[name^="courier_tracking_no[]"]').each(function(){
                    if($(this).val() != ""){
                        check_if_empty += 1;
                    }
                });
                console.log(check_if_empty);
                if(check_if_empty > 0){
                    $('#receiving-form').submit();
                }
            }
        },
            error: function (MLHttpRequest, textStatus, errorThrown) {
            console.log("There was an error: " + errorThrown);  
        }
    });
});