@RoffDaniel

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

Добрый день. Я знаю что есть подобные вопросы, но они мою проблему не решили, ну или я тупой чтобы это понять.
В общем, я зступорился на таком моменте: у меня есть таблица с кнопка, кнопка просмотра содержимого, которая выводит содержимое по 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;
    });


Очень буду вам признателен, благодарю!
  • Вопрос задан
  • 90 просмотров
Пригласить эксперта
Ответы на вопрос 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.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы