django：使用jquery動態插入評論表單

我正在構建一個Q &一個可以評論問題及其答案的網站。它是一個帶有ajax的線程評論系統。django：使用jquery動態插入評論表單

這是JavaScript部分：

function bindPostCommentHandler() 
{ 
    $('.commentFormWrapper form').submit(function() { 
    var current = $(this); 
     $.ajax({ 
      type: "POST", 
      data: current.serialize(), 
      url: "{% comment_form_target %}", 
      cache: false, 
      dataType: "html", 
      beforeSend:function(xhr){ 
       $('.submit', current).html('<img id="preloader" class="va-mid" src="{{MEDIA_URL}}img/indicator.gif" title="processing.." />'); 
       $('#commentError').remove(); 
      }, 
      success: function(html, textStatus) { 
       current.parent().replaceWith(html); 
       bindPostCommentHandler();     
      }, 
      error: function(xhr, textStatus, errorThrown) { 
       $('#commentError').remove(); 
       $('.submit', current).html('<input type="submit" name="submit" class="submit-post small-button" value="Submit" />'); 
       if(xhr.status == 400){ 
        current.before('<li id="commentError" class="no-bullet errornote margin10">OOPS ! your comment looked liked a spam. Try again with some modifications.</li>'); 
       }else { 
        current.before('<li id="commentError" class="no-bullet errornote margin10">Your comment was unable to be posted at this time. You may try after sometime.</li>'); 
       } 

      //bindPostCommentHandler();    

      } 
     }); 
     return false; 
    });   
} 
$(document).ready(function() { 
bindPostCommentHandler(); 
});

HTML部分：

<!-- comment form for question --> 
<div class="commentFormWrapper">     
    {% render_comment_form for question %} 
</div> 

<!-- comment form for answers --> 
{% for answer in question.answers.all %} 
<div class="commentFormWrapper">     
    {% render_comment_form for answer %} 
</div>

問題是，當只有在它的工作原理頁面的單一形式順利。有多種形式的工作，但多次發送請求到服務器（以倍數增長）。

此外，它會更好地動態插入/刪除窗體。但是，如果我手動添加表單的html，我會錯過註釋表單中的csrf標記和時間戳字段。任何人都有解決方案？

來源

2010-01-18 anand

你什麼時候打電話給你bindPostCommentHandler功能？它可能被稱爲多次？ – codeape 2010-01-18 13:00:48

我在頁面加載時調用一次，並在評論發佈成功時調用一次。你可以在$ .ajax（{... success：function（..）{--here--}中看到這個問題。問題是由於html標籤類名引起的，我應該使用id，然後綁定。 – anand 2010-01-18 15:26:05

style =「tdisplay：none;」，應該是style =「display：none;」？ – dotty 2010-01-18 16:56:55

的問題是，當success函數被調用，然後調用bindPostCommentHandler（再次），結合了匿名函數再次到所有表單對象。即在一次提交之後，每個表單都有兩個綁定到提交事件的功能，兩個提交後，三個等等。

因此，您必須更改Ajax函數的success部分，以僅將處理程序添加到響應中包含的表單。

也許是這樣的（我不知道如果這個工程，我不是在Javascript/jQuery的好）：

編輯：

你提到的第一個工作。然後代碼可能不工作，因爲DOM被替換。查看我的更新代碼（使用html而不是replace）。

編輯2：

什麼改變你的HTML結構。只是圍繞評論和表格包裝另一個div並替換此內容。這應該肯定有效。喜歡的東西

<div class="new_around_comments"> 
    <div class="comments"></div> 
    <div class="commentFormWrapper"> 
     <!-- Form --> 
    </div> 
</div>

然後你必須調用兩次parent()：

function bindPostCommentHandler(parent) 
{ 
    parent.find('form').submit(function() { 
    var current = $(this); 
     $.ajax({ 
      //... 
      success: function(html, textStatus) { 
       // Edit 2 
       parent = current.parent().parent() 
       parent.html(html); 
       bindPostCommentHandler(parent);   
      }, 
      //... 
     }); 
     return false; 
    });   
} 
$(document).ready(function() { 
var parent = $('.commentFormWrapper') 
bindPostCommentHandler(parent); 
});

來源

2010-01-18 16:46:13

您提到的錯誤是我正面臨的錯誤。但是你的解決方案不起作用 – anand 2010-01-18 18:14:59

有沒有錯誤或者它是同樣的問題？ – 2010-01-18 18:20:46

沒有錯誤，但瀏覽器重定向到表單預覽頁面，而不是通過ajax檢索。它可能是這種情況，如果它沒有被綁定，但你的解決方案似乎綁定它！ – anand 2010-01-18 18:30:01

分配#ID每一個表格，並使用這個ID，而不是「本」

var current_id = $(this).attr("id");

來源

2010-01-18 16:15:27 zalew

然後我需要爲bindPostCommentHandler添加一個參數。 – anand 2010-01-18 18:24:23

django：使用jquery動態插入評論表單

回答

相關問題