具有动态内容的引导模式加载最后的数据答案

【问题标题】：Bootstrap Modal with Dynamic Content loads last data具有动态内容的引导模式加载最后的数据
【发布时间】：2017-08-01 13:00:50
【问题描述】：

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

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

当检查多个数据并且它们重复时，即使有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，所以应该不是问题。

感谢您的帮助！ -伊莱

【问题讨论】：

我不清楚您的问题是什么？标题听起来像是 Modal 没有正确加载数据，但您的描述听起来像是您的问题与您如何确定是否在 Modal 中隐藏/显示表格行有关。
@RobertC 我对应该如何构建模态以及如何显示它们感到困惑。我有我需要的所有数据。我只需要正确显示它们。 :(
据我所知，您正在使用循环来更改 .modal-body $(target+' .modal-body').html(...) 的内容。但是html() 每次都会完全删除.modal-body 的内容。似乎您想在该容器中 append() 多行。

标签： javascript jquery html twitter-bootstrap bootstrap-modal

【解决方案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);  
        }
    });
});

【讨论】：