1

完全に機能するブートストラップモーダルウィンドウにフォームがあります-フォームの送信時に結果がウィンドウに投稿されます。このフォームは、ページの html にハードコードされています。

今、フォームをリモートで読み込もうとしています。フォームをうまくロードします（モーダルボディに入れます）。ただし、送信をクリックするとモーダルが消え、ページ全体がフォームの URL に移動します。

親ページまたはリモート URL でバインディングを定義する必要がありますか? 私の考えでは、ページロード時にリモート フォームの ID が DOM に認識されていません。また、リモート 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>

ここにリモート URL をロードします。

<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>

リモート URL からのフォーム:

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

そして、リモート URL/フォームの最後に:

<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>
4

1 に答える 1

0

これは私がそれを行う方法です：

$(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);
        });
    });
});
于 2013-01-18T15:48:58.557 に答える