javascript - 我的 Ajax 脚本在提交后没有隐藏 Bootstrap 模式
问题描述
我有一个页面在 3 列中显示 6 张引导卡。每个 Bootstrap 卡都显示一个图像、名称、描述和页脚按钮。当用户点击 Bootstrap Card 页脚按钮时,一个 Bootstrap Modal 打开一个带有 Sql 行数据的 ID 并进入这个 Bootstrap Modal,有 2 个输入和一个 textarea 表单,如下所述:
1. <input type="text" name="name" id="name" class="form-control" required />
2. <input type="email" name="email" id="email" class="form-control" required />
3. <textarea class="form-control" type="text" name="message" id="message" rows="3"
required></textarea>
要打开有关 ID 的 Modal,我在按钮卡代码中插入了一个 PHP 代码,如下所示:
<button type="button" class="btn btn-block btn-primary" data-toggle="modal"
data-target="#dataModal<?php echo $record['ID']; ?>">View Details</button>
<?php echo $record['ID']; ?>
与 SQL 行 ID 相关的位置。
当用户填写表单并单击 Modal 提交按钮时,所有数据都发送到数据库,这没关系,但是 Ajax 成功后 Bootstrap Modal 不会隐藏。
我用来通过 php 代码 (insert.php) 在数据库中插入数据的 Ajax 脚本是:
<script type="text/javascript" language="javascript" >
$(document).on('submit', '#contactForm', function(event){
event.preventDefault();
$.ajax({
url:"insert.php",
method:'POST',
data:new FormData(this),
contentType:false,
processData:false,
success:function(data){
alert("Message sent!");
$("#contactForm")[0].reset();
$('#dataModal').hide();
$(".modal-backdrop").remove();
}
});
});
</script>
我认为问题与 Ajax 成功的这一行有关:$('#dataModal').hide();
因为 Bootstrap Modal html id 属性"dataModal<?php echo $record['ID']; ?>"
不仅是“dataModal”。
在这种情况下,如果我这样说$('#dataModal<?php echo $record['ID']; ?>').hide();
什么都不会发生。
下面是完整的代码:
<div class="container">
<?php
include_once("includes/mysqli_connection.php");
$sql = "SELECT * FROM products ORDER BY RAND() LIMIT 6";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while( $record = mysqli_fetch_assoc($resultset) ) {
?>
<div class="card-deck" style="width: 18rem; display:inline-block; margin:15px;">
<div class="card">
<?php echo '<img src="upload/'.$record["image"].'" class="img-thumbnail" width="286" height="180" />'; ?>
<div class="card-body" align="center"><h5 class="card-title"><?php echo $record['ProductName']; ?></h5></div>
<div class="card-footer">
<button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#dataModal<?php echo $record['ID']; ?>">View Details</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="dataModal<?php echo $record['ID']; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Product: <?php echo $record['productName']; ?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="lead">Ask us about this product</div>
<form id="contactForm" method="post">
<div class="form-row">
<div class="col-md-4 mb-3">
<label>Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Your name" required />
</div>
<div class="col-md-5 mb-3">
<label>E-mail</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Your e-mail" required />
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<label>Message</label>
<textarea class="form-control" type="text" name="message" id="message" rows="3" placeholder="Your message" required></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">CLOSE</button>
<button type="submit" class="btn btn-success" id="submit" >SEND</button>
</form>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<script type="text/javascript" language="javascript" >
$(document).on('submit', '#contactForm', function(event){
event.preventDefault();
$.ajax({
url:"insert.php",
method:'POST',
data:new FormData(this),
contentType:false,
processData:false,
success:function(data){
alert("Message sent!");
$("#contactForm")[0].reset();
$('#dataModal').hide();
$(".modal-backdrop").remove();
}
});
});
</script>
在这种情况下,它会是什么,我必须做什么?谢谢大家。
解决方案
编辑:$('.modal').hide()
如果你只想隐藏模式,你可以使用。
您需要在脚本中设置模态 ID 的值,例如:
<script type="text/javascript">
var id = '#dataModal<?php echo $record['ID']; ?>';
</script>
然后你可以使用:
$(id).hide();
推荐阅读
- quarkus - Quarkus - 在 Raspberry PI 中部署
- javascript - 当我尝试打开“update_item”页面时,我不断收到此错误
- javascript - 如何将Resultset值传递给javascript中的变量值?
- ios - 中断嵌套在另一个块中的块中的保留循环
- python - 如何在 Python 中使用不同的输入自动运行 100,000 次 excel 模型的过程?
- ios - 在 iOS 网络视图中集成 Google Meet 视频通话
- amazon-web-services - AWS SFTP VPC 面向 Internet 的终端节点无法连接
- reactjs - 我应该单击两次以获取我的页面 [反应打字稿分页]
- python - Python中的微分方程组
- javascript - 如何使用选择标签对表格列进行排序