How to implement automatic updating of the block with comments without reloading the page?

R

rumak2017-07-26 16:15:04

JavaScript

rumak, 2017-07-26 16:15:04

There is a base.html template :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}{% endblock %}</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
        setTimeout(F1, 2000);
            function F1(){
                $.get('/', function(data){
                    $('#comment').html(data);
                });
                setTimeout(F1, 2000);
            }
        </script>
    </head>
    <body>
        {% block content %}

        {% endblock %}
    </body>
</html>

And there is comments_list.html , which fills the content block:

{% extends 'task/base.html' %}

{% block title %} Тестовая задача | Все комментарии {% endblock %}

{% block content %}
    <div id="comment">
        <h2>Все комментарии</h2>
        {% for comment in comments %}
                <hr>
                Имя: {{ comment.name }}<br>
                Email: {{ comment.email }}<br>
                Комментарий: <b>{{ comment.text }}</b><br>
                Дата: {{ comment.create }}<br>
                    <a href="{% url 'comments:comment_delete' pk=comment.pk %}" onclick="return confirm('Точно удалить?')">Удалить</a>
                <hr>
        {% endfor %}
    </div>
    <div class="row">
        <div id="form">
            <h2>Добавить новый комментарий</h2>
            <form method="POST" action="#" id="form">{% csrf_token %}
                {{ form.as_p }}
                <button type="submit">Отправить</button>
            </form>
            <hr>
        </div>
        <div class="pagination">
            <span class="step-links">
                {% if comments.has_previous %}
                    <a href="?page={{ comments.previous_page_number }}">Назад</a>
                {% endif %}

                <span class="current">
                    Страница {{ comments.number }} из {{ comments.paginator.num_pages }}.
                </span>

                {% if comments.has_next %}
                    <a href="?page={{ comments.next_page_number }}">Вперёд</a>
                {% endif %}
            </span>
        </div>
    </div>
{% endblock %}

The script itself is inserted into base.html. It does not work as expected: after refreshing, two forms appear on the page, into which it is impossible to write any data, because. after the update, everything entered disappears.
Question: What should I fix/remake so that only comments are updated?
Thank you!

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

X

xmoonlight, 2017-07-26
@rumak

1. Split the form and the list into 2 separate files.
2. Update - only the list. (form - do not touch)