Я видел множество результатов поиска для передачи данных в модальные, с возможными рабочими, но разными решениями. У меня есть база данных MySql с очень простой отдельной таблицей. Я использую PHP echo для эхо-данных в таблицу HTML. Заключительная <td> – кнопка начальной загрузки для запуска модального. Я не могу заставить включенный код работать, чтобы показать данные строки в модальном.
Здесь есть много комментариев, поскольку я учусь.
<?php /* mysql connect info */ $mysqlhost = ''; $mysqlusername = ''; $mysqlpassword = ''; $mysqldb = ''; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Website | Login</title> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <?php $mysqli = new mysqli($mysqlhost, $mysqlusername, $mysqlpassword, $mysqldb); if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } $sql="SELECT * FROM leads"; $result=mysqli_query($mysqli,$sql); // Associative array $row=mysqli_fetch_assoc($result); ?> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <h1> <a class="navbar-brand" href="#"> <span class="glyphicon glyphicon-th-list" aria-hidden="true"> </a> </h1> </div> </div> </nav> <header id="header"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> </div> </div> </div> </header> <!-- Beginning of Sections --> <section id="main"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="container"> <table class="table table-striped"> <thead> <tr> <!--<th>Lead Number</th>--> <th>First Name</th> <th>Last Name</th> <th>Moving Date</th> <th>eMail</th> <th>Phone</th> <th>From</th> <th>To</th> <th>Moving Size</th> <!--<th>IP Address</th>--> <!--<th>Source</th>--> <th>Submission Time</th> <th>Actions</th> </tr> </thead> <tbody> <?php while($row=mysqli_fetch_assoc($result)) { echo "<tr>"; /*echo "<td>" . $row["lead_id"] ."<td>";*/ echo "<td>" . $row["customer_first_name"] ."</td>"; echo "<td>" . $row["customer_last_name"] ."</td>"; echo "<td>" . $row["moving_date"] ."</td>"; echo "<td>" . $row["customer_email"] ."</td>"; echo "<td>" . $row["customer_phone"] ."</td>"; echo "<td>" . $row["customer_from_zip"] ."</td>"; echo "<td>" . $row["customer_to_zip"] ."</td>"; echo "<td>" . $row["customer_moving_size"] ."</td>"; /*echo "<td>" . $row["customer_ip_address"] ."<td>";*/ /*echo "<td>" . $row["lead_handle"] ."</td>";*/ echo "<td>" . $row["sent_date"] ."</td>"; echo "<td> <button type=\"button\" class=\"btn btn-primary btn-sm\ data-toggle=\"modal\" data-target=\"#myModal\" data-id=\"". $row["lead_id"]."\">Edit</button></td>"; echo "</tr>"; } echo "</tbody>"; echo "</table>"; ?> <!-- Button trigger modal --> </div> </div> </div> </div> </section> <footer id="footerindex"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> </div> </div> </footer> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <!-- this is google jquery library--> <script src="js/jquery-3.1.1.js"></script> <script src="js/bootstrap.js"></script> <script src="js/my.js"></script> <!-- This is the functionality of the login screen --> <!-- at one point the drop down was not working because we did not include the bootstrap.js which much come after the initial include to the jquery library--> <script type="text/javascript" src="/js/jquery-3.1.1.js"> $('#myModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) var id = button.data('id') var modal = $(this) modal.find('.modal-title').text('Lead Number ' + id) modal.find('.modal-body input').val(recipient) }) </script> <!-- MODAL BEGIND --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body1"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </body> </html>в<?php /* mysql connect info */ $mysqlhost = ''; $mysqlusername = ''; $mysqlpassword = ''; $mysqldb = ''; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Website | Login</title> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <?php $mysqli = new mysqli($mysqlhost, $mysqlusername, $mysqlpassword, $mysqldb); if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } $sql="SELECT * FROM leads"; $result=mysqli_query($mysqli,$sql); // Associative array $row=mysqli_fetch_assoc($result); ?> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <h1> <a class="navbar-brand" href="#"> <span class="glyphicon glyphicon-th-list" aria-hidden="true"> </a> </h1> </div> </div> </nav> <header id="header"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> </div> </div> </div> </header> <!-- Beginning of Sections --> <section id="main"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="container"> <table class="table table-striped"> <thead> <tr> <!--<th>Lead Number</th>--> <th>First Name</th> <th>Last Name</th> <th>Moving Date</th> <th>eMail</th> <th>Phone</th> <th>From</th> <th>To</th> <th>Moving Size</th> <!--<th>IP Address</th>--> <!--<th>Source</th>--> <th>Submission Time</th> <th>Actions</th> </tr> </thead> <tbody> <?php while($row=mysqli_fetch_assoc($result)) { echo "<tr>"; /*echo "<td>" . $row["lead_id"] ."<td>";*/ echo "<td>" . $row["customer_first_name"] ."</td>"; echo "<td>" . $row["customer_last_name"] ."</td>"; echo "<td>" . $row["moving_date"] ."</td>"; echo "<td>" . $row["customer_email"] ."</td>"; echo "<td>" . $row["customer_phone"] ."</td>"; echo "<td>" . $row["customer_from_zip"] ."</td>"; echo "<td>" . $row["customer_to_zip"] ."</td>"; echo "<td>" . $row["customer_moving_size"] ."</td>"; /*echo "<td>" . $row["customer_ip_address"] ."<td>";*/ /*echo "<td>" . $row["lead_handle"] ."</td>";*/ echo "<td>" . $row["sent_date"] ."</td>"; echo "<td> <button type=\"button\" class=\"btn btn-primary btn-sm\ data-toggle=\"modal\" data-target=\"#myModal\" data-id=\"". $row["lead_id"]."\">Edit</button></td>"; echo "</tr>"; } echo "</tbody>"; echo "</table>"; ?> <!-- Button trigger modal --> </div> </div> </div> </div> </section> <footer id="footerindex"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> </div> </div> </footer> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <!-- this is google jquery library--> <script src="js/jquery-3.1.1.js"></script> <script src="js/bootstrap.js"></script> <script src="js/my.js"></script> <!-- This is the functionality of the login screen --> <!-- at one point the drop down was not working because we did not include the bootstrap.js which much come after the initial include to the jquery library--> <script type="text/javascript" src="/js/jquery-3.1.1.js"> $('#myModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) var id = button.data('id') var modal = $(this) modal.find('.modal-title').text('Lead Number ' + id) modal.find('.modal-body input').val(recipient) }) </script> <!-- MODAL BEGIND --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body1"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </body> </html>
Также вы можете сообщить мне, можете ли вы добавить скрипты jQuery внутри html и переопределить другой jquery для активации модального?
Хорошо держать код более чистым, используя отступ хорошо.
<script ~~> также является тегом, например div, p, h1, но имеет отображение: none. Поэтому, конечно, вы можете добавить <script> в html-файл. Все нормально.
Когда браузер встречает этот <script src = "jquery.js"> , браузер получает код jquery.js с сервера (в данном случае ваш сервер). Таким образом, вы не можете переопределить другой код js. Это всего лишь дважды работа для браузера, и код jquery читается дважды.
Я не понимаю, что вы делаете, в частности код <script type="text/javascript" src="/js/jquery-3.1.1.js"> . Вы уже включили jquery-3.1.1.js выше! Зачем ты это делаешь?
Во всяком случае, браузер не может найти #myModal по времени (или времени?), Которые читают код $ ('# myModal'). On ('show.bs.modal', function (event) {~~. Поэтому код должен быть под моделью div.
Будь счастливым кодированием ^^.