2

我已经搜索了答案，但找不到任何答案。也许这里有人可以指出我正确的方向。

我有一个简单的模态形式（引导程序）。它应该像这样工作。

您输入表单并单击发送。表格信息被发送到电子邮件地址。发送邮件时，会显示带有确认的新模式。

我试图实现这个解决方案：Bootstrap Modal ajaxified

到目前为止，我有这个： 模态：

<div class="hide fade modal" id="input-modal">
<form class="form-horizontal well" data-async data-target="#input-modal" action="/some-endpoint" method="POST">
    <fieldset>
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
        </div>
        <div class="modal-body">
            <label>Name</label>
            <input id="name" type="text" placeholder="Type your name...">
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
            <button type="submit" class="btn btn-primary" value="send"/>Send</button>
        </div>
    </fieldset>
</form>

Javascript：

jQuery(function($) {
$('body').on('submit','form[data-async]', function(event) {
    alert('submit Event');
    var $form = $(this);
    var $target = $($form.attr('data-target'));

    $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: $form.serialize(),
        success: function(data, status) {
        $target.html(data);
        }
    });
    event.preventDefault();
});

});

但我需要帮助通过邮件发送输入并将信息发送回模态作为确认。

我已经尝试自己解决这个问题好几天了，但现在我已经放弃了。

4

1 回答 1

1

如果您使用 jQuery >= 1.5，请查看此处的文档。当 AJAX 调用返回时，这将为您提供一个处理新模式的地方。所以你的代码看起来像这样。

jQuery(function($) {
$('body').on('submit','form[data-async]', function(event) {
    alert('submit Event');
    var $form = $(this);
    var $target = $($form.attr('data-target'));

    $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: $form.serialize()
    }).done(function(data){
       //pop your modal here
       $('#your-new-modal').modal('show')
    });
    event.preventDefault();
});

这是假设您计划发送电子邮件服务器端，因为您无法从 Javascript 发送它。在您的示例中，您应该将标记的 HTML 内容更改为从 AJAX 调用返回的数据，而不是打开新的模式。您可以在此处找到有关通过 Javascript 打开新模式的文档。

没有运行这个，所以可能有错别字。

于 2013-05-08T18:35:50.787 回答