将表单发布的结果放入Bootstrap 3中的模式中 [英] Placing the results of a form post into a modal in Bootstrap 3

问题描述

如何获取表单发布的结果以在Bootstrap 3的模式窗口中显示?

How can I get the results of a form post to display in a modal window in Bootstrap 3?

我有一个项目列表，每个项目都有一个编辑"按钮.单击编辑按钮后，我需要发布到表单并触发响应的模式弹出窗口.我正在尝试使用jQuery的.ajax()函数执行此操作，但不确定是否是最佳方法:

I have a list of items, and each item has an "edit" button. When an edit button is clicked, I need to post to a form and trigger a modal pop-up with the response. I'm trying to do this using jQuery's .ajax() function, and I'm not sure if it's the best approach:

$(".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>从锚链接触发模式，但是如何通过表单发布来触发模式?

But, I'm getting stuck when it's time to parse the result of the form post. How can I get that to appear in a modal pop-up in Bootstrap 3? The Bootstrap docs talk about triggering a modal from an anchor link with <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>, but how would you trigger it with a form post?

也许我正在向后考虑它，或者使它过于复杂.也许我应该先打开模式，然后提交.ajax()表单帖子，然后用结果更新<div>.我已经习惯了使用Fancybox，并在所有模式下都切换到Bootstrap.

Maybe I'm thinking about it backwards, or over-complicating it. Perhaps I should open the modal first, then submit the .ajax() form post, then update the <div> with the result. I'm used to using Fancybox, and am switching to Bootstrap for all modals.

谢谢！

推荐答案

创建模态元素

<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准备就绪时对其进行初始化

and initialize it on dom ready

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

然后在需要时显示它并显示消息

then show it with the message when you want it like

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

演示:小提琴

这篇关于将表单发布的结果放入Bootstrap 3中的模式中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！