How to display data from PHP in a modal window (MDB)?

Question

PHP

Good afternoon. I know that there are similar questions, but they did not solve my problem, well, or I'm stupid to understand this.
In general, I stopped at this moment: I have a table with a button, a content view button that displays the content by id from the database. Next, somehow you need to pass the id to the modal window in order to do PHP magic there later. I’m sure that my version is great, but I don’t know how otherwise =(
Here is the table code:

echo '
<tbody>
          <tr>
            <th>
              <a type="button" class="btn btn-outline-dark btn-rounded btn-sm px-2" href="/admin/news/edit/'.$row['id'].'/">
        <i class="fas fa-pencil-alt mt-0"></i>
      </a>
      <a type="button" class="btn btn-outline-dark btn-rounded btn-sm px-2" href="/admin/news/del/'.$row['id'].'/">
        <i class="far fa-trash-alt mt-0"></i>
      </a>
            </th>
            <td>'.$row['id'].'</td>
            <td>'.$row['date'].'</td>
            <td>'.$row['author'].'</td>
            <td>'.$row['title'].'</td>
            <td><a type="button" class="btn btn-outline-dark btn-rounded btn-sm px-2" href="/admin/news/viewtext/'.$row['id'].'/" data-toggle="modal" data-target="#ViewNewsText" data-idnews="'.$row['id'].'">
        <i class="fas fa-eye"></i>
      </a></td>
            <td><span class="d-inline-block text-truncate" style="max-width: 300px;">'.$row['script_text'].'</span></td>
          </tr>
        </tbody>
';

Here is the window code:

<div class="modal fade top" id="ViewNewsText" tabindex="-1" role="dialog" aria-labelledby="exampleModalPreviewLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalPreviewLabel">Modal title</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>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

Well, here are my attempts =D

$('#ViewNewsText').on('show.bs.modal', function(e) {
        var idnews = e.relatedTarget.dataset.idnews;
    });

I will be very grateful to you, thank you!

Answer 1

If you do everything in a very crutch way, then you can add as many modals as you have entries. And give each modal its own unique id, for example #myRecord1, #myRecord2... #myRecordModal<?= $row['id']; ?>
This is a poor approach, but if you need to solve the problem here and now, then why not?
Slightly better, use data attributes. For each button, add property data-id, for example like this:

<a type="button" data-id="<?= $row['id']; ?>" class="btn btn-outline-dark btn-rounded btn-sm px-2" href="/admin/news/del/'.$row['id'].'/">
        <i class="far fa-trash-alt mt-0"></i>
      </a>

and load data via Ajax through any library, for example jQuery.
The third way, which everyone comes to sooner or later, is to send JSON data to the client and render it through the same Vue. But it's more JavaScript than PHP.