重用Bootstrap Modal和动态PHP数据

时间:2016-02-17 18:39:58

标签: javascript php twitter-bootstrap bootstrap-modal

我觉得模态很有挑战性,而且我正在研究别人的代码,我真正喜欢一种新的模态旋转(如果我可以让它工作)。

模式使用基于ID的项目特定信息填充,但是当用户单击退出并根据唯一ID选择不同项目特定信息的模态触发器时,它们将获得旧信息。看起来似乎需要在触发器之间销毁模态。以下是该项目需要的工作方式:

  1. 使用数据库信息填充库存页面
  2. On Action Click,Take Item ID并传递给Modal
  3. 显示具有更多项目特定信息的模态
  4. 允许用户关闭模式并单击其他项目操作
  5. 重复步骤2-4
  6. 这是我目前的代码:

    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>
    

    正如你所看到的,我试图在点击和隐藏时删除/销毁模态数据,但都不起作用。

    目前的行为:

    情景1:

    • 用户点击项目1-模式显示项目1数据
    • 用户关闭第1项模式
    • 用户点击项目2模式显示项目1数据

    情景2:

    • 用户点击第3项 - 模式显示第3项数据
    • 用户关闭第3项模式
    • 用户点击第1项 - 模式显示第3项数据

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

1 个答案:

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