I am working on a Laravel and Bootstrap project and currently doing the update feature for multiple rows by using a modal at a time. I have a table with a checkbox in each row :
<?php $No = 1; ?>
<table id="tbl_pengadaan" class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th ><input type="checkbox" name="cb_all" id="checkall"></th>
<th >No</th>
<th >No PR</th>
<th >PR Line</th>
<th >Shopping Cart</th>
<th >PR Received Date</th>
<th >PGr</th>
<th >No Material</th>
<th style="width: 400px">Nama Material</th>
<th >Qty</th>
<th >UoM</th>
<th >Unit Price</th>
<th >Total Budget</th>
<th >PR Currency</th>
<th >No RFx</th>
<th style="width: 250px">Judul RFx</th>
<th >Tgl RFx</th>
<th >Submission Deadline</th>
<th >Tgl Opening Tender</th>
<th >TE Mulai</th>
<th >TE Sampai</th>
<th >Negosiasi Mulai</th>
<th >Negosiasi Sampai</th>
<th >Klarifikasi Mulai</th>
<th >Klarifikasi Sampai</th>
<th >No PO</th>
<th >PO Line</th>
<th >Created at</th>
<th >Updated at</th>
@role('admin')
<th>Action</th>
@endrole
</tr>
</thead>
<tbody>
@foreach($pengadaans as $row)
<tr>
<!-- <td></td> -->
<td>
<input type="checkbox" name="cb_mark" id="cb"
data-target="#modal-edit-pengadaan"
data-pr_no=""
>
</td>
<td></td>
<td></a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="right"></td>
<td></td>
<td align="right"></td>
<td align="right"></td>
<td></td>
<td></td>
<td></td>
<td style="white-space: nowrap"></td>
<td style="white-space: nowrap"></td>
<td style="white-space: nowrap"></td>
<td style="white-space: nowrap"></td>
<td style="white-space: nowrap"></td>
<td style="white-space: nowrap"></td>
<td style="white-space: nowrap"></td>
<td style="white-space: nowrap"></td>
<td style="white-space: nowrap"></td>
<td></td>
<td></td>
<td style="white-space: nowrap"></td>
<td style="white-space: nowrap"></td>
<td>
hapus
</td>
</tr>
<?php $No++; ?>
@endforeach
</tbody>
</table>
I want to pass some data from the checked rows to a modal. Here is the code of the modal :
<!-- [start] Modal edit pengadaan -->
<div class="modal fade" id="modal-edit-pengadaan">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content" style="top: 100px">
<form method="post" action="pengadaan/update">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit data pengadaan</h5>
</div>
<div class="modal-body">
<table>
<tr>
<th>No PR</th>
</tr>
<!--
<tr>
<td><input type="text" class="form-control" name="no_pr" id="no_pr" value="no_pr (based on checked row)"></td>
</tr>
-->
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
<!-- [end] Modal edit pengadaan -->
Here is my button that trigger the modal
<button type="button" style="float:right; margin-right: 3px" class="btn btn-info" data-toggle="modal" data-target="#modal-edit-pengadaan">
<i class="fa fa-pencil"></i> Edit Selected
</button>
And here is my javascript code :
$('#modal-edit-pengadaan').on('show.bs.modal', function (event) {
var rowCount = ($('#tbl_pengadaan tr').length)-1;
console.log('test' + rowCount);
if ( event.relatedTarget != null) {
var button = $(event.relatedTarget) // Button that triggered the modal
var cbrow = document.getElementById("cb1");
}
var no_pr = cbrow.data('pr_no')
var modal = $(this)
//modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body #jlh_row').text(no_pr)
})
I want to make the table row in the Modal can be generated based on checked rows.
Thanks in advance
Aucun commentaire:
Enregistrer un commentaire