mercredi 4 mars 2020

Passing multiple row data from table to modal

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