个人中心
gpt4 book ai didi

php - 将 data-* 传递给 bootstrap Modal

转载 作者：行者123 更新时间：2023-11-29 10:56:02 25 4
gpt4 key购买 nike

我已经看到了许多将数据传递到模态的搜索结果，所有这些都具有可能的工作但不同的解决方案。我有一个 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">&times;</span></button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body1">
    <p>One fine body&hellip;</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 来激活模式？

最佳答案

  1. 充分使用缩进可以使代码更加简洁。

  2. <script ~~>也是一个类似于 div 、 p 、 h1 的标签，但它有 display : none 。所以当然你可以添加<script> html 文件中的标记。没关系。

  3. 当浏览器遇到<script src = "jquery.js">时，浏览器从服务器(在本例中为您的服务器)获取 jquery.js 代码。所以，你不能覆盖其他js代码。只是浏览器的工作量增加了一倍，jquery 代码被读取了两次。

  4. 我不明白你在做什么，特别是 <script type="text/javascript" src="/js/jquery-3.1.1.js">代码。您已经在上面包含了 jquery-3.1.1.js!你为什么要这么做？

  5. 无论如何，浏览器在读取代码的时间(或时间？)中找不到#myModal $('#myModal').on('show.bs.modal', function (event) { ~~ .所以代码应该在模型div下。

快乐编码^^。

关于php - 将 data-* 传递给 bootstrap Modal，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43011591/

25 4 0
文章推荐： mysql - 在 MySQL 中比较时，转换为 varchar 或 varchar 为 int 更快吗？
文章推荐： MYSQL，在同一语句中分配和读取变量
文章推荐： php - Doctrine ORM 异常
文章推荐： javascript - Firebase 身份验证错误 : auth/invalid-credential
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com