将data- *传递给Bootstrap Modal [英] Passing data-* to bootstrap Modal
问题描述
我已经看到了许多将数据传递给模态的搜索结果，所有这些搜索结果都有可能可行，但解决方案却不同.我有一个MySql数据库，其中有一个非常简单的单个表.我正在使用PHP echo将数据回显到HTML表.最后一个<td>是一个引导程序按钮，用于触发模态.我无法获取包含的代码以在模式中显示行数据.
I have seen the many search results for passing data to a modal, all with possible working but different solutions. I have a MySql DB, with a very simple single table. I am using PHP echo to echo the data to a HTML table. The final <td> is a bootstrap button to trigger a modal. I am unable to get the included code to work to show the row data in the modal.
在我学习的过程中，这里有很多评论.
There are a lot of comments in here as I am learning.
<?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>
还可以让我知道是否可以在html内添加jQuery脚本，并且它们会覆盖其他jQuery脚本来激活模式吗?
Also can you let me know if you can add jQuery scripts inside the html and do they override the other jquery for that activates the modal?
推荐答案
-
很好地使用缩进来保持代码更干净.
It is good to keep code more cleaner by using indent well.
<script ~~>还是div，p，h1之类的标签，但显示为:none.因此，您当然可以在html文件中添加<script>标记.没关系.
<script ~~> is also a tag like div , p , h1 but it has display : none. So of course you can add <script> tag in html file. It's OK.
当浏览器遇到该<script src = "jquery.js">时，浏览器从服务器(在本例中为您的服务器)获取jquery.js代码.因此，您不能覆盖其他js代码.这只是浏览器工作的两倍，并且jquery代码被读取了两次.
When Browser meet that <script src = "jquery.js">, the browser gets the jquery.js code from server ( in this case , your server ). So, You can't override other js code. It's just twice the work for the browser, and the jquery code is read twice.
我不明白您在做什么，尤其是<script type="text/javascript" src="/js/jquery-3.1.1.js">代码.您已经在上面包含了jquery-3.1.1.js！你为什么要这么做?
I can't understand what are you doing, specifically the <script type="text/javascript" src="/js/jquery-3.1.1.js"> code. You already included jquery-3.1.1.js above! Why are you doing that?
无论如何，浏览器无法在读取代码$('#myModal').on('show.bs.modal'，function(event){~~ .因此，代码应位于模型div的 下
Anyway, browser can not find #myModal in timing(or time?) that read the code $('#myModal').on('show.bs.modal', function (event) { ~~ . So the code should be under the model div.
编码愉快^^.
这篇关于将data- *传递给Bootstrap Modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
