Вывод данных MySQL в модальном режиме

Я искал решение своей проблемы и нашел несколько с использованием AJAX. Однако они у меня не работают. Есть ли способ сделать это без AJAX? Я собрал небольшой портал для просмотра информации о моем клиенте, и я пытаюсь вывести некоторые данные MySQL в модальном режиме MDBootstrap. Все работает, кроме той части, где появляется модальное окно (входит только первая строка БД). Вот что у меня есть до сих пор.

$con=mysqli_connect("localhost","db_user","dbpass","db");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to database: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT * FROM clients");

echo "<table id='clientsInfo' class='table table-striped table-bordered table-sm cellspacing=0 width=100%'>
  <thead>
    <tr>
      <th class='th-sm'>Client
      </th>
      <th class='th-sm'>Website URL
      </th>
      <th class='th-sm'>cPanel
      </th>
      <th class='th-sm'>Webmail
      </th>
      <th class='th-sm'>Website Admin
      </th>
      <th class='th-sm'>Cloudflare
      </th>
      <th class='th-sm'>Client Info
      </th>
    </tr>
  </thead>";

while($row = mysqli_fetch_array($result))
{
echo "<tbody>";
echo "<tr>";
echo "<td>" . $row['client_name'] . "</td>";
echo "<td><a target='_blank' href='" . $row['website_url'] . "'><button type='button' class='btn blue-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><a target='_blank' href='" . $row['cpanel'] . "'><button type='button' class='btn peach-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><a target='_blank' href='" . $row['webmail'] . "'><button type='button' class='btn purple-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><a target='_blank' href='" . $row['web_admin'] . "'><button type='button' class='btn blue-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><a target='_blank' href='" . $row['cloudflare'] . "'><button type='button' class='btn peach-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><button type='button' data-toggle='modal' data-target='#fullHeightModalRight' class='btn btn purple-gradient btn-sm'>Client Info</button></td>
<!-- Client Info Modal -->
<div class='modal fade right' id='fullHeightModalRight' tabindex='-1' role='dialog' aria-labelledby='clientInfoLabel'
  aria-hidden='true'>

  <!-- Add class .modal-full-height and then add class .modal-right (or other classes from list above) to set a position to the modal -->
  <div class='modal-dialog modal-full-height modal-right' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h4 class='modal-title w-100' id='clientInfoLabel'>Hello World</h4>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body'>
      " . $row['client_info'] . "
      </div>
      <div class='modal-footer justify-content-center'>
        <button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
      </div>
    </div>
  </div>
</div>
<!-- Client Info Modal -->";
echo "</tr>";
echo "</tbody>";
}
echo "<tfoot>";
echo "<tr>";
echo "<th>Client";
echo "</th>";
echo "<th>Website URL";
echo "</th>";
echo "<th>cPanel";
echo "</th>";
echo "<th>Webmail";
echo "</th>";
echo "<th>Website Admin";
echo "</th>";
echo "<th>Cloudflare";
echo "</th>";
echo "<th>Client Info";
echo "</th>";
echo "</tr>";
echo "</tfoot>";
echo "</table>";

mysqli_close($con);
?>```

javascript php bootstrap-modal bootstrap-4 mdbootstrap
person MichaelMavashev    schedule 27.12.2019    source источник
comment
Можете ли вы предоставить скриншот проблемы? Что вы имеете в виду под несколькими строками? Он исчезает с экрана? Что творится?   -  person Difster    schedule 27.12.2019
comment
@Difster, вот как дела. Красный работает, синий должен отображать данные из каждой строки, однако он показывает только содержимое из первой. dl4.joxi.net/drive/ 2019/12/27/0030/2126/1972302/02/ dl4.joxi.net/drive/2019/12/27/0030/2126/1972302/02/ dl4.joxi.net/drive/2019/12/27/0030/2126/1972302/02/   -  person MichaelMavashev    schedule 27.12.2019
comment
Поскольку вы обновили свой код и исправили некоторые проблемы, такие как исправление проблемы сортировки, обновите код здесь, на SO, чтобы мы могли проверить, как вы изменили код.   -  person Amanjot Kaur    schedule 27.12.2019

Ответы (1)


arrow_upward
2
arrow_downward

удалите <tbody> из цикла и поместите его перед циклом. Также поставьте </tbody> после цикла.

Кроме того, удалите это модальное окно из цикла и вставьте его перед тегом </body> в конце раздела HTML.

<!-- Client Info Modal -->
<div class='modal fade right' id='fullHeightModalRight' tabindex='-1' role='dialog' aria-labelledby='clientInfoLabel'
  aria-hidden='true'>

  <!-- Add class .modal-full-height and then add class .modal-right (or other classes from list above) to set a position to the modal -->
  <div class='modal-dialog modal-full-height modal-right' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h4 class='modal-title w-100' id='clientInfoLabel'>Hello World</h4>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body' id="dynamic_contents"></div>
      <div class='modal-footer justify-content-center'>
        <button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
      </div>
    </div>
  </div>
</div>
<!-- Client Info Modal -->

Я только что добавил идентификатор для модального тела dynamic_contents

Затем добавьте функцию AJAX, как указано ниже.

function open_modal(contents=null){
    $('#dynamic_contents').html(contents);
    $('#fullHeightModalRight').modal();
}

затем для кнопки client_info добавьте триггер для onClick, как показано ниже.

echo '<td><button type="button" class="btn btn purple-gradient btn-sm" onclick="open_modal(\''.$row['client_info'].'\')">Client Info</button></td>';
person LahiruTM    schedule 27.12.2019
comment
Привет, спасибо за этот вклад. Это исправило ошибку сортировки, которая у меня была. Однако проблема с выводом данных в модальное окно сохраняется. - person MichaelMavashev; 27.12.2019
comment
Большой! Это сработало. У вас была небольшая опечатка onClick как openModal, отредактированная на open_modal. Еще раз, спасибо. - person MichaelMavashev; 27.12.2019