我觉得模态很有挑战性,而且我正在研究别人的代码,我真正喜欢一种新的模态旋转(如果我可以让它工作)。
模式使用基于ID的项目特定信息填充,但是当用户单击退出并根据唯一ID选择不同项目特定信息的模态触发器时,它们将获得旧信息。看起来似乎需要在触发器之间销毁模态。以下是该项目需要的工作方式:
这是我目前的代码:
inventory.php
触发器:
<a data-toggle="modal" data-target="#ajax" data-id="<? echo $row['id'];?>" href="./mod/v_email.php?id=<? echo $row['id'];?>" class="btn red btn-sm dropdown-toggle inv_action">Email <i class="icon-note"></i></a>
然后在页面底部进行模态初始化:
<div class="modal fade" id="ajax" role="basic" aria-hidden="true">
<div class="page-loading page-loading-boxed">
<img src="../../assets/global/img/loading-spinner-grey.gif" alt="" class="loading">
<span>
Loading... </span>
</div>
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
v_email.php
$id=($_GET['id']);
<div class="modal-header">
<button type="button" class="close" id="modal_close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Let someone know!</h4>
</div>
<div class="modal-body">
<div class="row">
<form id="veh_email_form" method="post">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<input type="text" class="form-control" name="name" placeholder="Name" required="required">
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="email" class="form-control" name="email" placeholder="Email" required="required">
</div>
<div class="input-group">
<textarea class="form-control" style="width:269px;height:117px;" rows="3" name="message" placeholder="Message">
<? echo $id;?></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn red-haze" value="Send Email">
</div>
</form>
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("form#veh_email_form").on("submit",function() {
$('form#veh_email_form input[type=submit]').attr({disabled: 'disabled',value: 'Submitting Application ...'});
var formData = $("form#veh_email_form").serialize();
$.ajax({
type: 'POST',
url: './mod/mod_helper/veh_email_proc.php',
data: formData,
async: false,
success: function(msg){
if((msg) == 1) {
$("#modal_close").trigger("click");
}
else {
$("#app_error").show();
}
}
});
return false;
});
$("#ajax").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null);
});
$("#modal_close").click(function() {
$('#ajax').removeData('modal');
});
});
</script>
正如你所看到的,我试图在点击和隐藏时删除/销毁模态数据,但都不起作用。
目前的行为:
情景1:
情景2:
我在这里看不到什么,如果您需要更多信息,请发表评论 - 我可以编辑问题并添加更多内容(尝试包含所有内容,同时保持小巧易读)
答案 0 :(得分:1)
我建议将所有脚本保存在inventory.php
页面并从v_email.php
页面中删除,它将解决使用新项目详细信息打开模式时的问题。
要么你可以使用
$("#ajax").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null);
});
或
$("#ajax").on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
清除模态中的旧数据
<强> inventory.php 强>
HTML
<a data-toggle="modal" data-target="#ajax" data-id="<? echo $row['id'];?>" href="./mod/v_email.php?id=<? echo $row['id'];?>" class="btn red btn-sm dropdown-toggle inv_action">Email <i class="icon-note"></i></a>
<div class="modal fade" id="ajax" role="basic" aria-hidden="true">
<div class="page-loading page-loading-boxed">
<img src="../../assets/global/img/loading-spinner-grey.gif" alt="" class="loading">
<span>
Loading... </span>
</div>
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
JS
注意:在jQuery和Bootstrap库之后放下以下代码(记住jQuery&amp; Bootstrap库总是先行)
将$("form#veh_email_form").on("submit",function()
替换为$(document).on("submit", "#veh_email_form", function ()
<script>
$(document).ready(function(){
$(document).on("submit", "#veh_email_form", function () {
$('form#veh_email_form input[type=submit]').attr({disabled: 'disabled',value: 'Submitting Application ...'});
var formData = $("form#veh_email_form").serialize();
$.ajax({
type: 'POST',
url: './mod/mod_helper/veh_email_proc.php',
data: formData,
async: false,
success: function(msg){
if((msg) == 1) {
$("#modal_close").trigger("click");
}
else {
$("#app_error").show();
}
}
});
return false;
});
$("#ajax").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null);
});
$("#modal_close").click(function() {
$('#ajax').removeData('modal');
});
});
</script>
<强> v_email.php 强>
<?php
$id=($_GET['id']);
?>
<div class="modal-header">
<button type="button" class="close" id="modal_close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Let someone know!</h4>
</div>
<form id="veh_email_form" method="post">
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<input type="text" class="form-control" name="name" placeholder="Name" required="required">
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="email" class="form-control" name="email" placeholder="Email" required="required">
</div>
<div class="input-group">
<textarea class="form-control" style="width:269px;height:117px;" rows="3" name="message" placeholder="Message">
<? echo $id;?></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn red-haze" value="Send Email">
</div>
</form>