Как правильно обновить div, используя Jquery / Ajax в шаблоне Django

Я пытался реализовать решениеВот, но я не могу заставить его работать правильно.

У меня есть div, который заполняется с помощью цикла внутри шаблона Django. Прямо под этим у меня есть поле ввода, где я могу ввести текст и нажать кнопку Отправить. Действие Submit должно запустить сценарий Jquery, который получает объект модели с сервера. Этот модельный объект затем должен быть передан в div, а затем div должен быть «обновлен». Намерение здесь заключается в том, что после обновления div переменная, к которой обращается цикл for, будет обновлена, что будет отображать дополнительные новые результаты.

Код моего шаблона:

<h1> This is a Test Ajax Page</h1>
<div id="refresh-this-div">
    {% for comment in question.comment_set.all %}
        <p class="">{{ comment.body }}</p>
    {% endfor %}
        <input id="my-text-input-id" type="text" />
        <button type="submit" class="add-comment-button">Add</button>
    </div>
</div>

Мой Jquery:

<script type="text/javascript">
    $(document).ready(function() {
        $("button.add-comment-button").click(function() {
            var com_body = $('#my-text-input-id').val();
            $.ajax({
                    url: '/test_login_url',
                    success: function(data) {
                    $('#refresh-this-div').html(data);
                    }
                  });
        });
    });
</script>

Мой взгляд:

def test_login_url(request):
    question = Question.objects.get(id=1)
    com = Comment(question=question, body='This is a new Comment!')
    question.comment_set.add(com)
    return render_to_response('application/ajax_test_template.html', { 'question': question })

Когда я нажимаю кнопку «Отправить», div обновляется, однако обновленный раздел div теперь содержит копию тега h1. Когда я нажимаю Отправить несколько раз, появляются дополнительные теги h1 и комментарии.

Вот пример страницы перед нажатием:before_clicking_submit

И вот пример после нажатия кнопки Отправить:after_clicking_submit

Я дважды проверил, что моя реализация максимально идентична решению, на которое я ссылался ранее, однако, я чувствую, что, возможно, здесь упускаю что-то простое. Как правильно обновить div с новой обновленной переменной?

Ответы на вопрос(1)

Ваш ответ на вопрос