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對象更新列表

回答

相關問題