JQueryでフォームをポストし、DIVにデータを挿入する -

Question

jQuery経由でデータをポストし、同じDIVに戻り値を入力するフォームを作成しようとしています。この方法では、ポストアクションでページがリフレッシュされません。

<div id="add_value_form"> 

<form method="POST" action="#" onsubmit='return false'> 
    <!-- input fields --> 
    <input type="submit" value="Add" onclick='post_form("/add_value");'> 
</form> 

</div> 

JS機能：

function post_form(url) { 
    $.post(url, {'test':'test'}, function(data) { 
    $("#add_value_form").empty().append(data); 
    }, "text"); 
} 

これはFF3で完璧に動作、しかし、それだけでIE6/7でランダムに働くだろう。

サーバーはポストリクエストがIEから送信されていることを確認しますが、ポストデータは時折しか取得しません。

好奇心は、私はデータ変数に警告することを決定した：IE6/7はほとんど空白を印刷しながら、確かに十分な

$.post(url, {'test':'test'}, function(data) {alert(data);}, "text"); 

を、FF3は時折HTMLリターンで、リターンHTMLアウトするたびに印刷します。私はこの問題で何かを見つけることができなかったので、何が間違っていますか？

解決済み：私はこれを私のリクエスト処理コードにあるHTTPリダイレクトに追跡しました。したがって、POST要求を処理する関数はリダイレクトを投げ、IEはそれを気に入らない。私はその時点で完全な精神的な便秘を抱えていましたが、実際にはリダイレクトは必要ありません。

奇妙な部分は、もちろん、これはFFで動作し、IEは場合によってはリダイレクトを使用して動作します。

Answer 1

このシナリオでは、フォームタグをまったく使用する必要はありません。

<div id="add_value_form"> 
    <!-- input fields --> 
    <input type="button" value="Add" onclick='post_form("/add_value");' /> 
</div> 

編集 パオロBergantino私はまた、インラインJavaScriptを使用して避けるだろう言ったように。だから、代わりに使用します。

<div id="add_value_form"> 
    <!-- input fields --> 
    <input type="button" value="Add" class="formSubmitButton" /> 
</div> 

Javascriptを

$(document).ready(function() { 
    $('.formSubmitButton').click(function() { 
     $.post('/add_value', {'test':'test'}, function(data) { 
      $("#add_value_form").empty().append($(data)); 
     }, "text"); 
    }); 
}); 

を更新これはまだ問題を引き起こしているので、私は$.ajax方法でいくつかのテストを実行することになります。また、私はPOST呼び出しがこれまでにキャッシュされるとは思っていませんが、キャッシュされた値をfalseに設定しようとした場合にはそうです。別のテストでは、シリアル化の問題がないことを確認するために、既にエンコードされたデータを渡すことです。あなたはまだ問題を抱えている場合、あなたは確かに

$.ajax({ 
    url: '/add_value', 
    type: 'POST', 
    cache: false, 
    data: 'test=testValue', 
    dataType: 'text', 
    complete: function(xhr, textStatus) { 
    alert('completed'); 
    }, 
    success: function(data) { 
    alert(data); 
    }, 
    error: function(xhr, textStatus, errorThrown) { 
    alert('woops'); 
    } 
});