使用动态 PHP 数据重用 Bootstrap 模态

Question

我发现模态具有挑战性，并且我正在使用我真正喜欢的模态的新旋转来处理其他人的代码（如果我能让它工作的话）。

模态中填充了基于 ID 的特定于项目的信息，但是当用户单击退出并为基于唯一 ID 的不同特定于项目的信息选择模式触发器时，他们得到的是旧信息。似乎模态需要在触发器之间销毁。以下是它需要如何为这个项目工作：

使用数据库信息填充库存页面
点击操作时，获取项目 ID 并传递给模式
显示包含更多项目特定信息的模式
允许用户关闭模式并单击另一个项目操作
重复步骤 2-4

这是我当前的代码：

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>
    &nbsp;&nbsp;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>

如您所见，我尝试 delete/destroy 模态数据在点击和隐藏时都不起作用。

当前行为：

场景 1：

用户点击项目 1 - 模式与项目 1 数据一起出现
用户关闭项目 1 模式
用户点击项目 2 - 模式与项目 1 数据一起出现

场景 2：

用户点击项目 3 - 模态显示与项目 3 数据
用户关闭项目 3 模式
用户点击项目 1 - 模态显示与项目 3 数据

我在这里没有看到什么，如果您需要更多信息，请发表评论 - 我可以编辑问题并添加更多内容（尝试包含所有内容，但同时保持小而易读）

Answer 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>
    &nbsp;&nbsp;Loading... </span>
     </div>
     <div class="modal-dialog">
         <div class="modal-content">
         </div>
     </div>
 </div>

JS

注意：将以下代码放在 jQuery 和 Bootstrap 库之后（记住 jQuery 和 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>

使用动态 PHP 数据重用 Bootstrap 模态

Reusing Bootstrap Modal with Dynamic PHP Data

javascript

php

twitter-bootstrap

bootstrap-modal