将多行数据从表传递到模态

Question

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>{{$row->id}}</td>  -->
                  <td>
                    <input type="checkbox" name="cb_mark" id="cb{{$No}}"
                          data-target="#modal-edit-pengadaan" 
                          data-pr_no="{{$row->pr_no}}"
                    >
                  </td>
                  <td>{{$No}}</td>
                  <td>{{$row->pr_no}}</a></td>
                  <td>{{$row->pr_line}}</td>
                  <td>{{$row->shopping_cart}}</td>
                  <td>{{ \Carbon\Carbon::parse($row->transfer_date)->format('d-M-Y') }}</td>
                  <td>{{$row->pgr}}</td>
                  <td>{{$row->no_material}}</td>
                  <td>{{$row->nama_material}}</td>
                  <td align="right">{{$row->quantity}}</td>
                  <td>{{$row->uom}}</td>
                  <td align="right">{{number_format($row->unit_price,2)}}</td>
                  <td align="right">{{number_format($row->total_budget,2)}}</td>
                  <td>{{$row->pr_cur}}</td>
                  <td>{{$row->rfx}}</td>
                  <td>{{$row->rfx_title}}</td>
                  <td style="white-space: nowrap">{{ $row->rfx_date ? \Carbon\Carbon::parse($row->rfx_date)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->sub_deadline ? \Carbon\Carbon::parse($row->sub_deadline)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->tgl_opening ? \Carbon\Carbon::parse($row->tgl_opening)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->te_start ? \Carbon\Carbon::parse($row->te_start)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->te_to ? \Carbon\Carbon::parse($row->te_to)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->nego_start ? \Carbon\Carbon::parse($row->nego_start)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->nego_to ? \Carbon\Carbon::parse($row->nego_to)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->clarification_start ? \Carbon\Carbon::parse($row->clarification_start)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->clarification_to ? \Carbon\Carbon::parse($row->clarification_to)->format('d-M-Y') : "" }}</td>
                  <td>{{$row->po_no}}</td>
                  <td>{{$row->po_line}}</td>
                  <td style="white-space: nowrap">{{$row->created_at}}</td>
                  <td style="white-space: nowrap">{{$row->updated_at}}</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">
            {{ csrf_field() }}
            <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

Answer 1

So the steps with are this:

1. Store the modal element to append your rows to in a variable var modalRowContent = //your selector

2. Find the checked th elements

3. Find their parent rows tr
4. Append the rows to modalRowContent

The code may look something like:

var modalRowContent = $('#sectionToAppendTo'); // 1
var checkedRows = $('th input:checked').closest('tr'); //2 + 3
modalRowContent.append(checkedRows);// 4

Or you can chain it all

// 1                    // 4      // 2                // 3
$('#sectionToAppendTo').append( $('th input:checked').closest('tr') );

NOTE: I haven't tested this code. Please do not consider this a working answer.