передать идентификатор предмета с карты на модальный - PullRequest
Новая
       4

передать идентификатор предмета с карты на модальный

0 голосов
/ 16 октября 2019

поэтому у меня есть 3 карты, значение которых взято из базы данных. Я хочу получить идентификатор конкретной карты, на которую щелкнули, и отправить ее в модальный режим, чтобы я мог отобразить ее в модальном режиме

. отправив его триггеру кнопки как data-id = <? php $ card_id?>, но это не похоже на работу 

php & mysql codes to fetch from database  

<div class="container">
<div class="title">
    <h5><?php echo $card_id; ?></h5> <h1><?php echo $card_title; ?></h1>
    <div class="body">
        <?php echo $card_name; ?>
        <button type="button" data-toggle="modal" data-target="#myModal" name="button" data></button>
    </div>
</div>


<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <h1><?php echo $card_id; ?></h1>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

1 Ответ

1 голос
/ 16 октября 2019

Вы можете использовать Ajax для этого.

Сохранить data-id="<?php echo $card_id; ?>" в вашей кнопке.

Создать страницу php для обработки идентификатора, который будет отображаться:

if ($_POST['cardid']) {
     $id = $_POST['cardid'];
     echo $id;
}

Используйте модальное событие, чтобы выдвинуть идентификатор в тело вашего модала, используя объявление класса: 

$(document).ready(function(){
     $('#myModal').on('show.bs.modal', function(e){
          var cardid = $(e.relatedTarget).data('id');
          $.ajax({
               type: 'post',
               url: 'record.php',
               data: 'cardid='+ cardid,
               success: function(data){
                    $('.fetched-data').html(data);
               }
          });
     });
});

Поместите объявление класса в ваше модальное тело, где вы хотите, чтобы идентификатор отображался: 

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <h1 class="fetched-data"></h1>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
  </div>
</div>
...