按钮操作提交后停留在引导模式屏幕上答案

【问题标题】：Stay on bootstrap modal screen after button action submit按钮操作提交后停留在引导模式屏幕上
【发布时间】：2014-05-26 20:57:51
【问题描述】：

我正在使用引导模式，并且在里面我有一个表单。我希望模式在提交表单后保持打开状态，但它会关闭。我已经检查了向按钮添加一个弹出框（这不起作用）以强制在模式关闭之前显示一条消息。

有没有办法让它保持打开状态？我想在提交后向用户显示确认。在旧帖子中找不到任何答案。

也许我必须在提交后在视图中呈现不同的模板？这是 FORM POST 中的按钮定义：

<form action="" method="POST">
<button type="submit" class="btn btn-default">Add</button>

我也尝试过添加：onclick="$('#{{p.id}}').modal({'backdrop': 'static'});"

有什么想法吗？谢谢。

【问题讨论】：

我会将 jquery submit() 与 ajax 一起使用，例如为 form(my-form) 提供 id 而不是 jQuery('#my-form').submit( function(e){ e. preventDefault(); //ajax 提交});
我已在我的 html 末尾添加了该内容，但不起作用。
给我看你的剧本。标记和js
看这里jsfiddle.net/lgtsfiddler/WBnRV/13
现在我让它像小提琴一样工作，但是它没有提交表单。我没有得到 POST 事件来处理表单。谢谢

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

扩展为发送ajax请求

标记

<!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn btn-custom" data-toggle="modal">Open Form</a>
    <!-- Modal -->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">My Form</h4>
        </div>
        <div class="modal-body">
            <form id="my-form">
                <div class="form-group">
        <label class="control-label col-md-4" for="first_name">First Name</label>
        <div class="col-md-6">
            <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name"/>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-4" for="last_name">Last Name</label>
        <div class="col-md-6">
            <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name"/>
        </div>
    </div>
        <button type="submit" id="submit-form" class="btn btn-default">Save</button>
            </form>

        </div><!-- End of Modal body -->
        </div><!-- End of Modal content -->
        </div><!-- End of Modal dialog -->
    </div><!-- End of Modal -->

jQuery

$(document).on('submit','#my-form',function(event){    
    event.preventDefault()
    var formData = $(this).serialize();
    console.log(formData);
    $.ajax({
        url: "", // some php
        data: formData,
        datatype: "json",
        type: "POST",
        success: function(data) {}
   });
});

示例http://jsfiddle.net/lgtsfiddler/WBnRV/17/

【讨论】：