Question

如何在Bootstrap 3的模态窗口中显示表单帖子的结果？

我有一个项目列表，每个项目都有一个＆＃34;编辑＆＃34;按钮。单击编辑按钮时，我需要发布到表单并触发带有响应的模式弹出窗口。我尝试使用jQuery的.ajax()功能来做这件事，我不确定它是不是最好的方法：

$(".editForm").submit(function() {
    $.ajax({
        type        : "POST",
        cache       : false,
        url         : "./edit_form.php",
        data        : $(this).serializeArray(),
        success: function() {
            ##  How do I get the response to show up in a Bootstrap 3 modal? ##
        }
    });
    return false;
});

但是，当我花时间解析表单帖子的结果时，我会陷入困境。如何让它出现在Bootstrap 3的模态弹出窗口中？ Bootstrap文档讨论了使用<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>从锚链接触发模态，但是如何使用表单帖子触发它？

也许我正在考虑它倒退，或者过度复杂化。也许我应该先打开模态，然后提交.ajax()表单帖子，然后用结果更新<div>。我以前习惯使用Fancybox，并且正在切换到所有模态的Bootstrap。

谢谢！

Answer 1

创建一个模态元素

<div id="modal" class="modal fade">
    <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">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

并在dom ready

上初始化它

//create the modal
$('#modal').modal({
    show: false
});

然后在您需要时显示消息

$('#modal .modal-body').html('Test: '+new Date());
$('#modal').modal('show');

演示：Fiddle

Answer 2

显示模态的一种方法是：

1 - 从PHP回显HTML（edit_form.php）

2 - 成功功能

success: function(response){
    // response = "echoed HTML"
    $('#div_container').html(response); // Stick the bootstrap modal into a container of some kind
    $('#div_container').modal();        // Activate the bootstrap modal manually

    // make sure the container has proper bootstrap content/styling
}

将表单帖子的结果放入Bootstrap 3中的模态中

2 个答案: