jQueryの$ .post提出イベント助けに私がやろうとしています何

Question

は次のとおりです。

あなたが送信ボタンをフォーム上でクリックすると、ページがリロードされません、フォームからのデータは、のために別のページに送信される代わりに、そのページの処理とHTML出力が現在のページのフォームに置き換わります。具体的には、私はコメントフォームを追加する必要はなく、ページをリロードする必要はありません（そのページのFlash Playerにビデオストリーミングがあり、誰かがコメントを投稿するたびにページがリロードされると、お金と帯域幅）。ここで

は、フォームのマークアップです：

<div id="add-media-comment"> 
    <form enctype="application/x-www-form-urlencoded" method="post" action="/view/add-media-comment/id/12"><ol> 
    <li><label for="body" class="required">Body</label> 
    <div class="element"> 
    <textarea name="body" id="body" rows="10" cols="50"></textarea></div></li> 
    <li><div class="button"> 
    <input type="submit" name="add_comment" id="add_comment" value="Submit" class="input-submit" /></div></li></ol></form> 
</div> 

そして、ここで私が使用しているJavaScriptコードです：

$('#add-media-comment form').submit(function() { 
    // this is taken from the same page 
    // I have tested this with alert() and yes 
    // it is returning correct values 
    var id = $('#media-photo img').attr('id'); 
    var url = '/view/add-media-comment/id/' + id; 

    // let's submit the form to another page 
    $.post(url, $(this).serialize(), function() { 
     // and replace the content of #add-media-comment 
     // with the resulting HTML from the submission page 
     $('#add-media-comment').html(data); 
    }, 'html'); 

    return false; 
}); 

何が起こることは、送信ボタンをクリックした後、正確に何も起こらないということです。ページはリロードされませんが、フォームを送信しているページのコードは実行されません。

Answer 1

も予想戻りデータがHTMLであれば（「HTML」）を投稿する二番目のパラメータを与える必要はありません、$.postにコールバックでhtmlを利用できるようにしてみてください。

$.post(url, $(this).serialize(), function(html) { //instead of function() 
    alert(html); 
    // and replace the content of #add-media-comment 
    // with the resulting HTML from the submission page 
    $('#add-media-comment').html(data); 
}); 

Answer 2

あなたが何かを使用してみましたFirefoxのFirebugプラグインのようなもの？デバッグだけでなく、ajaxのsend/responseアクティビティを追跡するコンソールも提供しています。

jQueryのドキュメントの署名のように、成功コールバックのシグネチャを示しています

この場合

function (data, textStatus) { 
    // data could be xmlDoc, jsonObj, html, text, etc... 
    this; // the options for this ajax request 
} 

、あなたのフォームが常に提出することを確実にするためにブロック最後に/トライを使用することも良いアイデアですfalseを返します。

$('#add-media-comment form').submit(function(event) { 
    try { 
     var id = $('#media-photo img').attr('id'); 
     var url = 'view/add-media-comment/id/' + id; 

     // let's submit the form to another page 
     $.post(url, $(this).serialize(), function(data, textStatus) { 
     // and replace the content of #add-media-comment 
     // with the resulting HTML from the submission page 
     $('#add-media-comment').html(data); 
     }, 'html'); 
    } 
    finally { 
     return false; 
    } 
}); 

Answer 3

あなたは、このように形成し、変更してみてください。そして、jqueryのAJAXを使用してフォームを送信

<div id="add-media-comment"> 
<form enctype="application/x-www-form-urlencoded" method="post" onsubmit="return False;"><ol> 
<li><label for="body" class="required">Body</label> 
<div class="element"> 
<textarea name="body" id="body" rows="10" cols="50"></textarea></div></li> 
<li><div class="button"> 
<input type="submit" name="add_comment" id="add_comment" value="Submit" class="input-submit" onclick="return Submit();"/></div></li></ol></form> 

：

function Submit() { 
    $.ajax({ 
     type: "POST", 
     url: "/view/add-media-comment/id/" + $('#media-photo img').attr('id'), 
     dataType: "json", 
     data: $('#add-media-comment form').serialize(), 
     error: function(){ 
      //do something 
     }, 
     success: function(data){ 
      //do something 
     } 
    }); 
    return false; 
} 

代わりにJSONの、あなたは他のタイプを使用することができますサーバー側の関数から返されるデータ。