オブジェクトのAJAX更新リスト

Question

誰かが私を助けて、何が間違って言ったことができますか？

私のdjangoプロジェクトには、コメント部分があるproduct_detailページがあります。私は、AJAXで新しいコメントを追加した後、コメントリストを更新するつもりです。残念ながら、それはすべてのページを更新します。私は少し混乱しており、アドバイスが必要です。私はすべてのページではなく、コメントのリストのみを更新する必要があります。

product_detail.html：

<div class="card"> 
    <div class="card-block"> 
     <table id="comment-table"> 
     <thead> 
      <tr> 
       <th>Author</th> 
       <th>Date</th> 
       <th>Comment Text</th> 
      </tr> 
     </thead> 
     <tbody> 
      {% include 'project/comment_list.html' %} 
     </tbody> 
     </table> 
    </div> 

    <div class="card-footer"> 
    <form method="post" class="comment-form" id="comment-form" action="{% url 'project:comment_add' project_code=project.code product_code=product.code %}"> 
     {% csrf_token %} 
     {% for field in form %} 
     <div class="form-group{% if field.errors %} has-error{% endif %}"> 
      {% render_field field class="form-control" %} 
      {% for error in field.errors %} 
       <p class="help-block">{{ error }}</p> 
      {% endfor %} 
     </div> 
     {% endfor %} 
     <button type="submit" class="btn btn-primary">Send</button> 
     </form> 
    </div> 
</div> 

views.py：

def comment_add(request, project_code, product_code): 
    data = dict() 
    project = get_object_or_404(Project, pk=project_code, status='open') 
    product = get_object_or_404(Product, pk=product_code) 
    if request.method == 'POST': 
     form = CommentForm(request.POST) 
     if form.is_valid(): 
      comment = form.save(commit=False) 
      comment.author = request.user 
      comment.save() 
      product.comments.add(comment) 
      data['form_is_valid'] = True 
      data['html_comment'] = render_to_string('project/comment_list.html', {'product': product}) 
      form = CommentForm() 
     else: 
      data['form_is_valid'] = False 
    else: 
     form = CommentForm() 
    context = {'project': project, 'product': product, 'form': form} 
    return render(request, 'project/product_detail.html', context) 

JS：

$(function() { 
    var saveForm = function() { 
     var form = $(this); 
     $.ajax({ 
      url: form.attr("action"), 
      data: form.serialize(), 
      type: form.attr("method"), 
      dataType: 'json', 
      success: function (data) { 
       if (data.form_is_valid) { 
        $("#comment-table tbody").html(data.html_comment); 
       } 
       else { 
        $("#comment-form").html(data.html_comment_form); 
       } 
      } 
     }); 
     return false; 
    }; 

    $("#comment-form").on("submit", ".comment-form", saveForm); 
}); 

Answer 1

問題は= "送信" タイプですネイティブリフレッシュ新しいページ。フォームを提出するのをやめなければなりません。

$("#comment-form").submit(function(event) { 

     /* stop form from submitting normally */ 
     event.preventDefault(); 


    // here your ajax code 
});