引导MYSQL PHP -发送模态内容
Bootstrap MYSQL PHP - Send Modal Content
我有数据,我在一个表中显示,使用bootstrap。对于每一个我想要做一个模态,在这个你会确认你想要发送电子邮件。
这是他们会点击的链接:
<a data-toggle="modal" data-target="#email-'.$row['id'].'">Resend Email</a>
模态在另一个页面上,我使用
将其包含在MYSQL数据的while中:include 'modal/modal-resend-email.php';
在本页,我然后使用:
加载模态:<div id="email-<?php echo $row['id'];?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $row['number_tenants']; echo $row['full_name_one'];?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
对于加载的每个按钮,你可以点击它们,它会打开一个模态,问题是它只显示从第一行的数据,我做错了什么,或者有更好的方法来做到这一点?
谢谢!
我认为你的<a data-toggle="modal" data-target="#email-'.$row['id'].'">Resend Email</a>
锚需要有一个类。
我会用比你更简单的方式写:<a href="" class="modal-open">Resend Email</a>
。
然后,您需要以某种方式,将数据从db传递到每个模态。所以我要更新上面的锚,有数据库数据了。所以我会添加自定义html属性来存储来自db的任何数据。我将使用一个简单的例子,当您只想更新一个名称时。因此,您应该根据自己的需要调整这个示例。
<a href="" class="modal-open" data-id="<?php echo $row['id'];?>" data-name="<?php echo $row['name'];?>">Resend Email</a>
.
假装这是你的模态:
<div class="modal fade" tabindex="-1" role="dialog" id="modal-update">
<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-body">
<form action="update.php" method="POST" id="update-form">
<div class="form-group">
<label for="modal-update-id">ID</label>
<input type="number" id="modal-update-id" class="form-control modal-update-id" disabled="disabled">
</div>
<div class="form-group">
<label for="modal-update-name">Name</label>
<input type="text" id="modal-update-name" class="form-control modal-update-name">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="modal-save">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
然后我会用javascript来完成这项工作。首先,当用户单击其中一个Resend Email
链接时,您需要获得存储在该特定链接中的id和名称(通过data-id
和data-name
属性),并用它们填充模态字段。所以:
var updateId = 0;
var updateName = '';
$('.modal-open').click(function(e){ // when one of the links are clicked..
e.preventDefault();//prevent the default behaviour of the link
updateId = $(this).attr('data-id');//grab the data-id attr value
updateName = $(this).attr('data-name');//grab the data-name attr value
$('.modal-update-id').val(updateId);//populate the id field of the modal with that grabbed value
$('.modal-update-name').val(updateName);//populate the name field of the modal with that grabbed value
$('#modal-update').modal();//show the modal
});
$('#modal-save').click(function(e){//when the user clicks the Save changes button...
e.preventDefault();
$.ajax({
method: $('#update-form').attr('method'),//grab the modal's form method
url: $('#update-form').attr('action'),//grab the modal's form action
data: { id:updateId, name:$('.modal-update-name').val(), age:$('.modal-update-age').val() },//grab the user's new data from the modal
cache:false
}).done(function(msg){
document.location.reload();//reload the page to see the changes
$('#modal-update').modal('hide');//hide the modal
}).fail(function(XMLHttpRequest, textStatus, errorThrown){
console.log(textStatus + ' ' + errorThrown);
});
});
相关文章:
- 我想使用模态通过php文件发送邮件,并且我希望在提交关闭后关闭pop
- 打开一个模态并将其链接到AngularJS中的指令
- SemanticUI模态not onDeny/onApprove事件未激发
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- 包含数据库中相关信息的开放模态
- bootstrap消除模态并显示另一个模态
- 模态提示-如何重写此代码
- 模态框无法正常工作
- 将数据传递给由服务创建的Ionic模态
- iframe模态无法关闭
- 点击AngularJS模态窗口捕捉背景事件
- jqueryajax调用是复制url,当在模态视图之后在外部js文件中进行调用时
- 使用模态对话框(JQuery)编辑函数
- 如何在模态实例中使用filter
- 页面上有多个模态框
- 如果满足某些条件,如何在不调用模态的情况下首先调用类
- 在将缩略图链接到模态时遇到问题
- jQuery模态弹出的行为类似于确认和警报对话框
- 用FormMethod发回.Post使用模态