1

モーダル ボックスから ajax を使用してフォームを送信するのに苦労しています。

        $( "#modal" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Submit Form": function() {

                    $("#my-form").submit(function(event) {
                        event.preventDefault();
                            $.post('myurl', function(data) {
                                $('.result').html(data);
                            });
                    });

            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });

「フォームを送信」ボタンをクリックしてフォームを送信しようとしても、実際には何も起こりません。

私がやろうとしているのは、モーダルボックスボタンを使用してajax経由でフォームを送信することだけです。次に、コントローラーは単純なテキスト「フォームが処理されました」を返し、.resultコントローラーからの応答で更新されます。

編集

私のhtmlフォームは次のようになります。

<form id="my-form" action="myurl" method="post" enctype="multipart/form-data">
    <fieldset>
        <legend>Upload file</legend>
        <p>
                            <label for="fileData">File</label>
            <br />
            <input id="fileData" name="fileData" type="file" value=""/>
        </p>
    </fieldset>
</form>
4

3 に答える 3

2

.ajaxSubmit（）関数を持つjQueryフォームプラグインを使用できます。次のようになります。

$("#my-form").ajaxSubmit({
  success: function(response) {
    $('.result').html(response);
  }, error: function(e) {
    $('.result').html(e);
  }
});

beforeSubmit-コールバックを事前送信します

success-送信後のコールバック

error-失敗応答コールバック

于 2012-10-16T05:16:24.190 に答える
0

これらの行を変更して、データを含めてください<form>:

$.post($(this).parent('form').attr('action'), $(this).parent('form').serialize(), function(data) {
    $('.result').html(data);
});

PS:ファイルの送信が AJAX で機能するかどうかはわかりません。論理的にはうまくいくはずです。

于 2012-10-16T04:42:09.087 に答える