Как передать значение модальному? - PullRequest
Новая
       6

Как передать значение модальному?

0 голосов
/ 21 мая 2018

У меня есть динамическая таблица, и я хочу отредактировать или удалить данные с помощью кнопок edit и delete, но я не могу передать идентификатор модальному.Я не могу понять, что я пропустил.Вот мой пример кода: 

 <table id="example" class="table table-striped">
        <thead>
          <tr>
            <th>Param ID</th>
            <th>Decription</th>
            <th>Code</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
          <?php
            require 'lab/db/dbcon.php';
            $query = $con->query("SELECT * FROM param");  
              while($row=mysqli_fetch_array($query)){
              ?>
                <tr>
                  <td><?php echo $row['parid'];?></td> 
                  <td><?php echo $row['parnam']; ?></td> 
                  <td><?php echo $row['parcod']; ?></td> 
                  <td>
                    <a href="" class="btn btn-warning btn-xs" data-toggle="modal" id="<?php echo $row['parid'];?>"data-target="#editpar"><i class="fa fa-pencil"></i>
                    </a>

                    <a href="" class="btn btn-danger btn-xs" data-toggle="modal" id="<?php echo $row['parid']; ?>"   data-target="#delpar"><i class="fa fa-trash"></i>
                    </a>
                  </td> 
                </tr>
              <?php
            }          
          ?>
        </tbody> 
    </table>

 <!-- Start Edit Modal -->
  <div class="modal fade" id="editpar" role="dialog" style="width:100% !important;">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h5 class="modal-title"><i class="fa fa-pencil"></i> Edit record </h5>
        </div>
        <div class="modal-body">
          <h1><?php echo $row['parid'];?></h1>
        </div> 
        <div class="modal-footer">
          <button type="button" class="btn btn-success" name="btnedit" id="<?php echo $row['parid'];?>"> <i class="fa fa-check"></i>
          </button>
          <button type="button" class="btn btn-default" data-dismiss="modal" name="btncancel"><i class="fa fa-remove"></i></button>
        </div>
      </div>
    </div>
  </div>
<!-- End Edit Modal -->

  <!-- Start Delete Modal -->
  <div class="modal fade" id="delpar" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> Are you sure to delete this record?</h5>
        </div>
        <div class="modal-body">
          <h1><?php echo $row['parid'];?></h1>
        </div> 
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" name="btndel" id="<?php echo $row['parid'];?>"> <i class="fa fa-check"></i>
          </button>
          <button type="button" class="btn btn-default" data-dismiss="modal" name="btncancel"><i class="fa fa-remove"></i></button>
        </div>
      </div>
    </div>
  </div>
<!-- End Delete Modal -->

1 Ответ

0 голосов
/ 21 мая 2018

Код ниже получит значение data-id по ссылке, по которой щелкнули.Это предполагает, что ваша ссылка для редактирования имеет атрибут data-id, значением которого является его parid.

Вы можете использовать этот шаблон: 

$('#editpar').on('show.bs.modal', function (event) {
  var a = $(event.relatedTarget);
  var par_id = a.data('id');

  var modal = $(this)
  modal.find('.modal-title').text('Par #' + par_id);
  modal.find('.modal-body').html('content here');
});

^ Те же рамки для модального удаления.

https://getbootstrap.com/docs/4.0/components/modal/ https://getbootstrap.com/docs/3.3/javascript/#modals

...