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 に答える