具有动态内容的Bootstrap模式加载最后的数据

Question

I have a table that when I hit save, it would get all the input fields in the first column and check in the database if the data already exists. If the condition is true, it would show an icon per row. And when I click that icon, the info relevant to that specific data will show as a bootstrap modal.

I've been working on my problem the whole day. I first tried to make it work with only one data. When I got what I wanted, I started to work on multiple data.

When multiple data is checked and they are duplicates, only the last info is shown even if there are 2 or more.

Here's my code:

The save button:

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

The html table:

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

Note: Only the first row is shown because the following rows are dynamically created.

The html modal:

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

What am I missing? Even if the modal comes from only 1 file, it has unique ID's so it should not be a problem.

Thanks for your help! -Eli

Answer 1

I tried a different approach. Instead of calling a url (I use CI) and showing the file that holds the modal template, I directly added the template inside my code:

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