Как вывести данные из PHP в модальное окно(MDB)?

Question

[RoffDaniel]

Добрый день. Я знаю что есть подобные вопросы, но они мою проблему не решили, ну или я тупой чтобы это понять.
В общем, я зступорился на таком моменте: у меня есть таблица с кнопка, кнопка просмотра содержимого, которая выводит содержимое по id из базы данных. Дальше, как-то нужно передать id в модальное окно чтобы потом там творить магию PHP. Уверен что мой вариант каличный, но по другому не умею =(
Вот код таблицы:

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>
';

Вот код окна:

<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>

Ну и вот мои попытки =D

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

Очень буду вам признателен, благодарю!

Answer 1

[Дмитрий]

Если сделать все очень костыльным способом, то можно добавить столько модалок, сколько у вас записей. И каждой модалке давать свой уникальный id, к примеру #myRecord1, #myRecord2... #myRecordModal<?= $row['id']; ?>
Это убогий подход, но если нужно решить проблему здесь и сейчас, то почему бы и нет?

Чуть лучше, использовать data атрибуты. Для каждой кнопки добавлять property data-id, к примеру вот так:

<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>

и данные загружать по Ajax через любую библиотеку, к примеру jQuery.

Третий способ, до которого все доходят рано или поздно - отдавать на клиент JSON данные и рендерить их через тот же Vue. Но тут больше JavaScript, а не PHP.

Comments

[RoffDaniel]

Благодарю. Так я использую ваш второй варинат, через data(в посте указано выше). Но пробоема у меня в том, что я не могу реализовать =(, знаний у меня малова-то. Не могли бы вы показать? Как правильно читать data-атрибуты и правильно вывести их, чтобы потом с этими переменными работать в модальном окне =)

Заранее, спасибо!

[Дмитрий]

1) Добавляете класс кнопке, к примеру my-button, чтобы получилось как:

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

2) Вешаете обработчик на клик по кнопке:

let $modal = $('#ViewNewsText');
$('.my-button').on('click', function(e) {
     e.preventDefault();
     let id = $(this).data('id'); // читаем data-attributes html
     $.ajax({
        // читаем отправка ajax запроса
     }).then((html) => {
           $modal.find('.modal-body').html(html);
           $modal.modal('show');
     });
});

[RoffDaniel]

Спасибо Вам! Только вопрос, почему мне в модальном окне показывает страницу?)))

[Дмитрий]

Потому что вы должны определить, это AJAX запрос или нет, а так вы грузите по AJAX всю страницу.

[RoffDaniel]

Прошу прощения, подскажите пожалуйста, как мне приравнять вывод к PHP переменной?