我一直在寻找解决问题的方法,并发现了一些使用AJAX的方法。但是,他们没有为我工作。没有AJAX,有没有办法做到这一点?我为我整理了一个小门户,以查看我的客户的信息,并且我试图在MDBootstrap Modal中输出一些MySQL数据。除了模式输入的部分(仅第一行DB输入)之外,其他所有功能都起作用。到目前为止,这就是我所拥有的。
$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'>×</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);
?>```
从循环中删除<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'>×</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
的ID
然后添加下面指定的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>';