0

Can someone say where I did mistake? I am tring to update list of comments with ajax after success adding but finally see this page.enter image description here

New comment is in the database but it seems like I miss something. After submit it redirect me to "task_comment_add" url but i need to stay in the same page just update list of objects (task-comments).

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;
});
Nurzhan Nogerbek
  • 4,806
  • 16
  • 87
  • 193
  • Do you mean, on successful save you're redirected to the task_comment_add url? – Ladmerc Apr 16 '17 at 17:39
  • I think I know the problem but need advice. I have list of tasks and every task has list of comments and all that in one page. It means that I have form to add comment for each task. I notice that only for first task I can add comments correctly. Because all forms has the same id and I think JS see only first form id. How to make unique id for every form. In template I can use id="task-comment-form-{{ forloop.counter }}" but then what to change in JS? – Nurzhan Nogerbek Apr 16 '17 at 18:06
  • Why don't you use just one form for the posting comment? – Ladmerc Apr 16 '17 at 21:42
  • Well I cant do it by my task. Do you have any ideas? I really need help. – Nurzhan Nogerbek Apr 17 '17 at 05:04

1 Answers1

1

Edited answer...

Here you can find a Javascript solution to check which form has been submitted is case of an html page with many forms

Community
  • 1
  • 1
dentemm
  • 6,231
  • 3
  • 31
  • 43
  • I used JsonReponse in view then in JS use that data to replace. So how to fix it? – Nurzhan Nogerbek Apr 16 '17 at 11:50
  • @NurzhanNogerbek Could you also add the html for the task_comment_list.html template? – dentemm Apr 16 '17 at 12:20
  • Check the post again pls. I added html for `task_comment_list.html`. – Nurzhan Nogerbek Apr 16 '17 at 12:31
  • I notice that my list of comments updates when I have comments but when comment list is empty it works wrong as in the picture of my post. Do you have any ideas? I am really comfused with that! – Nurzhan Nogerbek Apr 16 '17 at 13:52
  • Maybe your view is not being called correctly because of your view arguments. Do project.code, group_task.code and task.code all exist when no comments are present? – dentemm Apr 16 '17 at 14:41
  • Yes. As you see from `task_comment_list.html` when list of comments empty i show message like "No information". Then I try to add new comment, click submit button and it dont work as I expected. project.code, group_task.code and task.code are all exist I check values in console. – Nurzhan Nogerbek Apr 16 '17 at 14:44
  • I think I know the problem but need advice. I have list of tasks and every task has list of comments and all that in one page. It means that I have form to add comment for each task. I notice that only for first task I can add comments correctly. Because all forms has the same id and I think JS see only first form id. How to make unique id for every form. In template I can use id="task-comment-form-{{ forloop.counter }}" but then what to change in JS? – Nurzhan Nogerbek Apr 16 '17 at 16:57
  • If your JS you can use a css class instead of an id. When one of the form submit buttons is pressed, you check for the task-comment-form-{{forloop.counter}} to get the correct action url. – dentemm Apr 16 '17 at 17:06
  • I changed to class but anyway works only comments for first task. I think JS check document from top to bottom and handles the first match. So I need somehow to specify unique id for forms in JS. The problem there can be many tasks. Is it possible to make counter in JS? Something like {{forloop.counter}} but in JS? Sorry for my english. – Nurzhan Nogerbek Apr 16 '17 at 17:16
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/141830/discussion-between-dentemm-and-nurzhan-nogerbek). – dentemm Apr 16 '17 at 17:24
  • Thank you for this link, but there is so many answers and I dont know which one is best for me. What answer is best how do you think? Also in my forms I have button element. – Nurzhan Nogerbek Apr 17 '17 at 05:39