使用AJAX更新對象列表

有人可以說我犯錯了嗎？添加成功後，我想用ajax更新評論列表，但最後看到這個頁面。使用AJAX更新對象列表

新的評論是在數據庫中，但它似乎像我想念的東西。提交後重定向到「task_comment_add」url，但我需要留在同一頁面只更新對象列表（任務評論）。

urls.py：

url(r'^(?P<project_code>[0-9a-f-]+)/(?P<group_task_code>[0-9a-f-]+)/(?P<task_code>[0-9a-f-]+)/task_comment_add/$', 
    task_comment_add, 
    name='task_comment_add'),

views.py：

def task_comment_add(request, project_code, group_task_code, task_code): 
    data = dict() 
    project = get_object_or_404(Project, pk=project_code, status='open') 
    group_task = get_object_or_404(GroupTask, pk=group_task_code) 
    task = get_object_or_404(Task, pk=task_code) 
    if request.method == 'POST': 
     form = CommentForm(request.POST) 
     if form.is_valid(): 
      comment = form.save(commit=False) 
      comment.author = request.user 
      comment.save() 
      task.comments.add(comment) 
      data['form_is_valid'] = True 
      data['html_task_comment'] = render_to_string('project/task_comment_list.html', 
                 {'task': task}) 
     else: 
      data['form_is_valid'] = False 
    else: 
     form = CommentForm() 
    context = {'project': project, 'group_task': group_task, 'task': task, 'form': form} 
    data['html_task_comment_form'] = render_to_string('project/task_comment_form.html', context, request=request) 
    return JsonResponse(data)

task_list.html：

<div class="list-group custom-list-group"> 
    <div class="list-group-item bg-faded"> 
     {% include 'project/task_comment_form.html' %} 
    </div> 
    <div id="task-comments"> 
     {% include 'project/task_comment_list.html' %} 
    </div> 
</div>

task_comment_form.html：

<form method="post" id="task-comment-form" action="{% url 'project:task_comment_add' project_code=project.code group_task_code=group_task.code task_code=task.code %}"> 

</form>

task_comment_list.html：

{% for comment in task.comments.all %} 
    <div class="list-group-item flex-column align-items-start"> 
     <div class="d-flex w-100 justify-content-between"> 
      <h6 class="mb-1">{{ comment.author }}</h6> 
      <small>{{ comment.created }}</small> 
     </div> 
     <p class="custom-p">{{ comment.text }}</p> 
    </div> 
{% empty %} 
    <div class="list-group-item flex-column align-items-start"> 
     <div class="d-flex w-100 justify-content-center"> 
      <h6 class="mb-1 custom-h"><i class="fa fa-info-circle" aria-hidden="true"></i>&#9;{% trans 'NO COMMENTS' %}</h6> 
     </div> 
    </div> 
{% endfor %}

JS：

$("#task-comment-form").submit(function(event) { 
    event.preventDefault(); 
    console.log(event.preventDefault()); 
    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) { 
       $("#task-comments").html(data.html_task_comment); 
      } 
      else { 
       $("#task-comment-form").html(data.html_task_comment_form); 
      } 
     } 
    }); 
    $("#task-comment-form")[0].reset(); 
    return false; 
});

來源

2017-04-16 Nurzhan Nogerbek

你的意思是，在成功保存你被重定向到task_comment_add網址？ – Ladmerc

我想我知道這個問題，但需要建議。我有任務列表，每個任務都有一個評論列表和所有內容。這意味着我有表格來爲每項任務添加評論。我注意到只有第一個任務我才能正確添加註釋。因爲所有表單都有相同的ID，我認爲JS只能看到第一個表單ID。如何爲每個表單製作唯一的ID。在模板中，我可以使用id =「task-comment-form - {{forloop.counter}}」但是在JS中改變了什麼？ –

爲什麼你不僅僅使用一種形式發佈評論？ – Ladmerc

編輯答案...

Here你可以找到一個Javascript解決方案來檢查哪個表單已被提交是一個HTML頁面的情況下有很多形式

來源

2017-04-16 11:43:32 dentemm

我在視圖中使用JsonReponse，然後在JS中使用該數據來替換。那麼如何解決它？ –

@NurzhanNogerbek你還可以添加task_comment_list.html模板的html嗎？ – dentemm

再次檢查帖子請。我爲'task_comment_list.html'添加了html。 –

使用AJAX更新對象列表

回答

相關問題