Modal inside table - Mysql

Question

I’m trying to pass information that’s inside a table to a modal. Currently what I have is a simple function that displays a link on the screen and clicking on it opens another page with a QR image. I wanted to make it more dynamic and make it open in a modal.

I made some attempts, and I saw a lot in Tec. Google, but I couldn’t adapt to my code. If you can give me this help, I really appreciate it!

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Current code:

<div class="container">
  <div class="row">
    <div class="table-responsive text-center">
      <table class="table table-hover table-dark" id="alist">
      <thead>
        <tr>
        <th scope="col"><?php echo $lang['WALLET_ADDRESS']; ?></th>
        <th scope="col"><i class="fas fa-qrcode" style="font-size: 30px"></i></th>
        </tr>
      </thead>
      <tbody>
      <?php
        foreach ($addressList as $address)
        {
        echo "<tr><td>".$address."</td>";?>
        <td><a href="<?php echo $server_url;?>qrgen/?address=<?php echo $address;?>">
          <img src="<?php echo $server_url;?>qrgen/?address=<?php echo $address;?>" alt="QR Code" style="width:42px;height:42px;border:0;"></td></tr>
        <?php
        }
        ?>
        </tbody>
      </table>
    </div>
  </div>
</div>

Image of the current Code:

My attempt:

<div class="container">
  <div class="row">
    <div class="table-responsive text-center">
      <table class="table table-hover table-dark" id="alist">
      <thead>
        <tr>
        <th scope="col"><?php echo $lang['WALLET_ADDRESS']; ?></th>
        <th scope="col"><i class="fas fa-qrcode" style="font-size: 30px"></i></th>
        </tr>
      </thead>
      <tbody>
      <?php
        foreach ($addressList as $address)
        {
        echo "<tr><td>".$address."</td>";?>
        <td>
          <a href="<?php echo $server_url;?>qrgen/?address=<?php echo $address;?>" class="btn" role="button" data-toggle="modal" data-target="#qrcode_modal"><i class="fas fa-qrcode" style="font-size: 30px;color:white;border:0;"></i></a></td></tr>
        <?php
        }
        ?>
        </tbody>
      </table>
                  <!-- Modal -->
          <div class="modal fade" id="qrcode_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-qrcode" style="font-size: 20px"></i>QRCODE</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <img src="<?php echo $server_url;?>qrgen/?address=<?php echo $address;?>" style="width: 120px">
                </div>
              </div>
            </div>
          </div>
    </div>
  </div>
</div>

In my attempt the modal displays only the information of 1 given, the foreach does not work, ie, regardless of the line I click for display, will always show only the QR for 1 address.

Picture of my attempt:

Answer 1

I do not know much but I use some modals similarly, I will try to explain to help...

First in the modal, let’s take the qrcode image and put a div with id="qrcode", so we can change the content with the correct image:

<!-- Modal qrcode -->
<div class="modal fade" id="qrcode_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-qrcode" style="font-size: 20px"></i>QRCODE</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="qrcode" class="container"></div>
      </div>
    </div>
  </div>
</div>

Now let’s put a click event on each link to call a function that will replace the content in the div id="qrcode" and show the modal. Example item inside your foreach:

<a onclick="mostrarQRCODE('dados-para-gerar-qrcode');">
    <i class="fas fa-qrcode" style="font-size: 30px;color:white;border:0;">Nome do Item</i>
</a>

Now, the javascript function that will receive the address passed by clicking on the item, will replace the div id="qrcode" and display the modal using jquery:

function mostrarQRCODE(gerarQRCODE){
  $.post("gerar-qrcode.php", { 'qrcode':gerarQRCODE},
      function (resposta) {
          // Subistitui o conteúdo da div com id="qrcode"
          $("#qrcode").html(resposta);
          // Mostra o modal usando jquery
          $('#qrcode_modal').modal('show');
      }
  );
}

php page to generate qrcode:

// Recebe dados para gerar o qrcode
$qrcode = (isset($_POST['qrcode'])) ? $_POST['qrcode'] : null;

// Função para gerar o qrcode
...
...
...

// Retorno do qrcode, para ser mostrado dentro da div id=qrcode
echo $qrcode;

Well, the logic I use here is this, I couldn’t test in your example, but if you need it, it’ll be a few minor adaptations.