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

Question

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

У меня есть 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 с новой обновленной переменной?

Answer 1

HTML вернулся с вашего test_login_url вид, что вы звоните через ajax включает элемент h1 в ваш шаблон. В вашем обратном вызове ajax success вы загружаете этот HTML, который включает h1, в ваш refresh-this-div div, но вы не удаляете старый элемент h1, который находится вне контейнера. Быстрая проверка DOM с помощью инструментов разработчика в вашем браузере должна проиллюстрировать происходящее.

Возможно, самое простое решение - это обернуть содержимое вашего текущего шаблона в контейнер.

Код шаблона:

<div id="refresh-this-div">
    <h1> This is a Test Ajax Page</h1>
    {% 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>

Jquery:

$(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) {
                    // grab the inner html of the returned div 
                    // so you don't nest a new div#refresh-this-div on every call
                    var html = $(data).filter('#refresh-this-div').html();
                    $('#refresh-this-div').html(html);
                }
        });
    });
});

Answer 2

$(data).filter у меня не работает, поэтому я подсунул «данные» в виде строки, чтобы извлечь нужную мне часть HTML. Меня устраивает.