Question

我在bootstrap模式窗口中有一个表单可以很好地工作 - 结果在表单提交时发布到窗口。此表单已硬编码到页面的html中。

现在我正在尝试远程加载表单。它可以很好地加载表单（将其放入模态体中）。但是，现在当我单击提交时，模态消失，整个页面转到表单URL。

我是否需要在父页面或远程网址中定义我的绑定？我的想法是，在页面加载时，DOM不知道远程表单的id。还不确定远程URL是否可以引用父页面上的div。

所以我似乎不同步 - 父DOM不能识别表单，因为它是远程的，并且不确定远程表单是否可以绑定到父表单中定义的模式。

有什么想法吗？

谢谢！

来自父页面：

<div class="modal hide fade in" id="mymodal">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div>
<div class="modal-body"></div>
</div>

在此处加载远程网址：

<a class="tip" data-toggle="modal" data-target="#mymodal" href="/index.php/change_delivery/change/2" rel="tooltip" title="Change Delivery Date"><i class="icon-calendar"></i></a>

来自远程网址的

表单：

<form class="form-horizontal" id="delivery_date_form" action="/change_delivery/submit_change">
....
</form>

并在远程网址/表单的末尾：

<script>
$(function() {
$('#delivery_date_form').bind('submit', function() {
    $.ajax({
        url: "change_delivery/submit_change",
        type: "POST",
        dataType: "html",
        contentType: "application/html",
        success: function(msg) {
            // this is returned value from your PHP script
            //your PHP script needs to send back JSON headers + JSON object, not new HTML document!
            // update your "message" element in the modal
            $("#modal-body").text(msg);
        }
    });
});
});
</script>

Answer 1

我就是这样做的：

$(function(){
   var $mymodal = $('#mymodal');
    $('[data-toggle=modal]').click(function() {
        $mymodal.attr('data-form-action', $(this).attr('data-remote'));
    });

    $mymodal.find('.save-button').click(function() {
        $.post($mymodal.attr('data-form-action'), function(data) {
            $mymodal.find('.modal-body').html(data);
        });
    });
});

绑定远程表单到bootstrap模式

1 个答案: