0
私は保存すると、最初の列のすべての入力フィールドを取得し、データがすでに存在するかどうかをチェックします。条件が真であれば、行ごとにアイコンが表示されます。そのアイコンをクリックすると、その特定のデータに関連する情報がブートストラップモーダルとして表示されます。動的コンテンツを含むブートストラップモーダルは最後のデータをロードします
私は一日中私の問題に取り組んできました。まず、1つのデータだけで動作させるようにしました。私が望むものが得られたら、私は複数のデータに取り組み始めました。
複数のデータをチェックして重複している場合、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">×</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
私はあなたの問題が何であるかについては明らかではありませんよ？ Modalが正しくデータを読み込んでいないようなタイトルの音は聞こえますが、Modal内で表の行を非表示/表示するかどうかを決定する方法と関連しています。 –
@RobertC私はモーダルをどのように構築し、どのように表示するのか混乱しています。私は必要なすべてのデータを持っています。私はちょうどそれらを正しく表示する必要があります。 :( –
'.modal-body'' $（target + '.modal-body'）.html（...） 'の内容を変更するためにループを使用しているのですが、' html（） '毎回 '.modal-body'の内容を完全に消去するつもりです。あなたが' '複数の行をそのコンテナに' append（） 'したいと思うようです。 –