正如您在下面看到的,我有一个 php 生成的表,其中包含一个td,其中包含edit 和 delete anchors。我将$data['id']放在锚点的data-id属性中,并通过 jquery 将其传递给模态。但是,文章的 ID 没有显示在模态上。有人能说出我的代码有什么问题吗?是 php、html 还是 jquery?谢谢!
<?php
require "../connection.php";
$query = mysqli_query($conn, "SELECT * FROM `articles`");
while($data = mysqli_fetch_array($query)) {
echo '<tr>';
echo '<th scope="row">'.$data['id'].'</th>';
echo '<td><div align="center"><a href="#myModal" data-id="'.$data['id'].'" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div></td>';
echo '</tr>';
}
?>
PHP 生成的表
<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
HTML 模态
$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal
//we get details from attributes
var myArticleId=$(opener).attr('data-id');
//set what we got to our form
$('#myForm').find('[name="articleId"]').val(myArticleId);
});
查询
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Summary</th>
<th>Content</th>
<th><div align="center">Date Published</div></th>
<th><div align="center">Date Last Edited</div></th>
<th><div align="center">Action</div></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><div align="center"><a href="#articleEditModal" data-id="1" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td><div align="center"><a href="#articleEditModal" data-id="2" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td><div align="center"><a href="#articleEditModal" data-id="3" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div>
</td>
</tr>
</tbody>
</table>
检查页 - 表格
$('#articleEditModal').on('show.bs.modal', function (e) {
上面这一行显示错误:
未捕获的 ReferenceError: $ is not defined at cms.php:162
var opener = $(e.relatedTarget);
代替 var opener=e.relatedTarget;
希望这可以帮助!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
<table>
<tr>
<th scope="row">2</th>
<td>
<a href="#articleEditModal" data-article-id="2" data-toggle="modal" class="btn btn-success btn-sm">Edit</a>
<a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a>
</td>
</tr>
</table>
<!-- Modal-->
<div id="articleEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$('#articleEditModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var article_id = button.attr('data-article-id')
// take advantage of data attribute
// var article_id = button.data('article-id');
var modal = $(this)
modal.find('.modal-title').text('Article ' + article_id)
modal.find('.modal-body input').val(article_id)
})
</script>
// 示例 php 数据
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
<?php
require "../connection.php";
$query = mysqli_query($conn, "SELECT * FROM `articles`");
while($data = mysqli_fetch_array($query)) {
echo '<tr>';
echo '<th scope="row">'.$data['id'].'</th>';
echo '<td><div align="center"><a href="#myModal" data-id="'.$data['id'].'" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div></td>';
echo '</tr>';
}
?>
<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<script>
$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=$(e.relatedTarget);//this holds the element who called the modal
//we get details from attributes
var myArticleId=$(opener).attr('data-id');
//set what we got to our form
$('#myForm').find('[name="articleId"]').val(myArticleId);
});
</script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句