AJAX对象更新列表

有人可以帮助我说我做了什么错吗？AJAX对象更新列表

在我的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); 
});

来源

2017-04-06 Nurzhan Nogerbek

我前段时间有同样的问题。尝试添加onclick =“返回false;”到html按钮。您还可以尝试使按钮类型=“按钮”并更改＃注释表单上的事件侦听器。 – dome12b

http：//codereview.stackexchange.com/... –

感谢您的建议。我试着做你说的话，但在我看来，代码仍然更新页面，而不是成功后添加到页面的顶部，并且当地址必须仍然处于“/ comment_add/'/ product_detail /'。你能告诉我什么？ –

问题是类型= “提交”本机刷新新页面。你必须停止表单提交。试试这样的：

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

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


    // here your ajax code 
});

来源

2017-04-06 15:45:17

嗯，我尝试了下一个代码，但它似乎更新页面，而不是成功后添加到页面的顶部，并且当地址必须仍在'/ product_detail /中时，url地址变为'/ comment_add /' '。你能告诉我什么？ –

用虚拟数据做一个jsfiddle，我可以帮助你 –

AJAX对象更新列表

回答

相关问题