Django обновление HTML таблица с AJAX - PullRequest
Новая
       0

Django обновление HTML таблица с AJAX

0 голосов
/ 08 января 2020

Хорошо, я пытался понять все сообщения здесь, но не смог. Некоторые устарели, некоторые не похожи на мою проблему.

Не возражайте, чтобы я снова спросил.

У меня есть простая таблица HTML, с некоторыми данными в ней, и мне просто нужно обновить данные , когда это изменилось, не обновляя его.

У объекта есть поле 'is_locked', и мне нужно, чтобы, когда объект заблокирован (is_locked = True), показывался маленький значок шкафчика. Я могу сделать все это, но после ручного обновления sh, что нехорошо.

Поэтому, когда пользователь блокирует объект, после перенаправления (обновления страницы) отображается значок шкафчика. Но мне это нужно в режиме реального времени, поэтому, когда два пользователя смотрят на одну и ту же таблицу одновременно, после блокировки объекта (от одного пользователя), этот значок должен появиться в браузере другого пользователя без обновления стр.

Мне просто нужно, чтобы этот «дополнительный» контент (значок замка) отображался в режиме реального времени, когда пользователь блокирует объект.

Попробуйте игнорировать пользовательские имена (их нет в Engli sh)

My models.py: 

from django.db import models

class OpportunityList(models.Model):
    name = models.CharField(max_length=30, blank=True)
    address = models.CharField(max_length=100, blank=True)
    age = models.IntegerField(blank=True, null=True)
    is_locked = models.BooleanField(blank=True, null=True)
    ...

views.py: 

from django.http import JsonResponse
from django.shortcuts import render

from .models import OpportunityList
...
@login_required(login_url='registration/login')
def OptikaList(request):
    optika = OpportunityList.objects.all().filter(opp_type='optika')
    context = {
        'optika': optika
    }

    if request.is_ajax():
        data = {'rendered_table':render_to_string('opportunity/get_more_tables.html', context=context)}
        return JsonResponse(data)

    return render(request, 'opportunity/opp_optika.html', context)


def updateTable(request):
    qs = OpportunityList.objects.all().values()
    return JsonResponse({'users': list(qs)})

urls.py: 

from django.urls import path
from .views import *

urlpatterns = [
    ...
    path('optika/', OptikaList, name='optika'),
    path('ajax/update/', update_table, name='update_table'),
    ...

opp_optika. html, где находится таблица, со скриптом ajax. 

{% extends 'base.html' %}
{% load static %}
{% block title %} Optika {% endblock %}
{% block content_row %}

    {% if messages %}
        {% for message in messages %}
            <div class=" container-fluid alert alert-success alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <h4 class="alert-heading">Uspešno!</h4>
                <hr>
                <p class="mb-0">{{ message }}</p>
            </div>
        {% endfor %}
    {% endif %}

    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table table-hover dt-responsive" id="dataTable">
                {% include 'opportunity/opp_breadcrumb.html' %}
                <h2 style="margin-left: 50%;">OPTIKA</h2>

                <thead>
                <tr>
                    <th>Adresa Korisnika</th>
                    <th>Područje</th>
                    <th>Korisnik</th>
                    <th>TIS</th>
                    <th>Napomena</th>
                    <th>Akcije</th>
                    <th style="width: 5px">STATUS</th>
                </tr>
                </thead>
                <tbody>
                {% for opp in optika %}
                    <tr>
                        <td>{{ opp.optika_korisnik_adr }}</td>
                        <td>{{ opp.oppc_place }}</td>
                        <td>{{ opp.optika_korisnik }}</td>
                        <td>{{ opp.optika_korisnik_tis_id }}</td>
                        <td>{% if opp.oppc_comment %}{{ opp.oppc_comment }}{% else %}Bez napomene{% endif %}</td>
                        <td>
                            <button type="button" class="btn btn-success btn-sm" data-toggle="modal"
                                    data-target="#detalji_modal{{ opp.pk }}">
                                Detalji
                            </button>
                        </td>
                        <td>
                            {% if opp.is_locked %}
                                <form action="{% url 'opportunity:delete_locked' opp.pk %}" method="POST"
                                      style="display: table-cell">
                                    {% csrf_token %}
                                    <button class="btn"><i style="width: 50px;color: red" class="fa fa-lock"
                                                           aria-hidden="true"></i></button>
                                </form>
                            {% endif %}
                        </td>
                    </tr>
                    <!------------------------------------- DETALJIMODAL ---------------------------------------------->
                    <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
                         id="detalji_modal{{ opp.pk }}"
                         aria-labelledby="detalji_modalLabel">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="detalji_modalLabel">Detalji</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body" id="">
                                    <div class="container-fluid">
                                        <h5>{{ opp.optika_korisnik }}</h5>
                                        <p>{{ opp.optika_korisnik_adr.title }}</p>
                                        <p>Broj linije : {{ opp.optika_broj_linije }}</p>
                                        <p>Kontakt : {{ opp.optika_kontakt_tel1 }}</p>
                                        <hr>
                                        <p>Okvirni Datum : {{ opp.optika_instal_okvirni_datum }}</p>
                                        <p>TIS Posla : {{ opp.optika_posao_tis_id }}</p>
                                        <p>Zahtev Info : {{ opp.optika_zahev_uneo }}</p>
                                        <hr>
                                        <p>Datum Unosa : {{ opp.optika_zahtev_datum_unosa }}</p>
                                        <hr>
                                        <p>Napomena : <br> <br>
                                            {% if opp.oppc_comment %} {{ opp.oppc_comment }} {% else %} Nema
                                                napomene za korisnika {{ opp.optika_korisnik|title }}. {% endif %}
                                        </p>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <p style="margin-right: auto">Zahtev uneo/la : {{ opp.optika_zahev_uneo }}</p>
                                    {% if not opp.is_locked %}
                                        <form action="{% url 'opportunity:poziv' opp.pk %}" method="POST">
                                            {% csrf_token %}
                                            <button type="submit" name="poziv" class="btn btn-outline-danger">
                                                Poziv
                                            </button>
                                        </form>
                                    {% endif %}
                                    {% if opp.is_locked %}
                                        <form action="{% url 'opportunity:delete_locked' opp.pk %}" method="POST"
                                              style="display: table-cell">
                                            {% csrf_token %}
                                            <button type="submit" class="btn btn-dark">
                                                <i class="fas fa-lock-open"></i>
                                                Otključaj
                                            </button>
                                        </form>
                                    {% endif %}
                                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal">
                                        Zatvori
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!------------------------------------ DETALJI ENDMODAL ------------------------------------------->
                {% endfor %}
                </tbody>
            </table>
        </div>
        <script>
            $(document).ready(function () {
                setInterval(function () {
                    $.ajax({
                        url: '{% url 'opportunity:optika' %}',
                        type: "get",
                        cache: true,
                        dataType: 'html',
                        success: function (data) {
                            console.log("success");
                            $('#dataTable').html(data.rendered_table);
                        },
                        error: function (data) {
                            alert("Got an error dude " + data);
                        }
                    });
                }, 5000);
            });
        </script>
{% endblock content_row %}

get_more_tables. html: 

<tr>
    <th>Adresa Korisnika</th>
    <th>Područje</th>
    <th>Korisnik</th>
    <th>TIS</th>
    <th>Napomena</th>
    <th>Akcije</th>
    <th style="width: 5px">STATUS</th>
</tr>
{% for opp in optika %}
    <tr>
        <td>{{ opp.optika_korisnik_adr }}</td>
        <td>{{ opp.oppc_place }}</td>
        <td>{{ opp.optika_korisnik }}</td>
        <td>{{ opp.optika_korisnik_tis_id }}</td>
        <td>{% if opp.oppc_comment %}{{ opp.oppc_comment }}{% else %}Bez napomene{% endif %}</td>
        <td>
            <button type="button" class="btn btn-success btn-sm" data-toggle="modal"
                    data-target="#detalji_modal{{ opp.pk }}">
                Detalji
            </button>
        </td>
        <td>
            {% if opp.is_locked %}
                <form action="{% url 'opportunity:delete_locked' opp.pk %}" method="POST"
                      style="display: table-cell">
                    {% csrf_token %}
                    <button class="btn"><i style="width: 50px;color: red" class="fa fa-lock"
                                           aria-hidden="true"></i></button>
                </form>
            {% endif %}
        </td>
    </tr>
    <!------------------------------------- DETALJIMODAL ---------------------------------------------->
    <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
         id="detalji_modal{{ opp.pk }}"
         aria-labelledby="detalji_modalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detalji_modalLabel">Detalji</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="">
                    <div class="container-fluid">
                        <h5>{{ opp.optika_korisnik }}</h5>
                        <p>{{ opp.optika_korisnik_adr.title }}</p>
                        <p>Broj linije : {{ opp.optika_broj_linije }}</p>
                        <p>Kontakt : {{ opp.optika_kontakt_tel1 }}</p>
                        <hr>
                        <p>Okvirni Datum : {{ opp.optika_instal_okvirni_datum }}</p>
                        <p>TIS Posla : {{ opp.optika_posao_tis_id }}</p>
                        <p>Zahtev Info : {{ opp.optika_zahev_uneo }}</p>
                        <hr>
                        <p>Datum Unosa : {{ opp.optika_zahtev_datum_unosa }}</p>
                        <hr>
                        <p>Napomena : <br> <br>
                            {% if opp.oppc_comment %} {{ opp.oppc_comment }} {% else %} Nema
                                napomene za korisnika {{ opp.optika_korisnik|title }}. {% endif %}
                        </p>
                    </div>
                </div>
                <div class="modal-footer">
                    <p style="margin-right: auto">Zahtev uneo/la : {{ opp.optika_zahev_uneo }}</p>
                    {% if not opp.is_locked %}
                        <form action="{% url 'opportunity:poziv' opp.pk %}" method="POST">
                            {% csrf_token %}
                            <button type="submit" name="poziv" class="btn btn-outline-danger">
                                Poziv
                            </button>
                        </form>
                    {% endif %}
                    {% if opp.is_locked %}
                        <form action="{% url 'opportunity:delete_locked' opp.pk %}" method="POST"
                              style="display: table-cell">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-dark">
                                <i class="fas fa-lock-open"></i>
                                Otključaj
                            </button>
                        </form>
                    {% endif %}
                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal">
                        Zatvori
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!------------------------------------ DETALJI ENDMODAL ------------------------------------------->
{% endfor %}

1 Ответ

1 голос
/ 08 января 2020

У вас есть ряд проблем в вашем коде.

Что делает ваш текущий AJAX вызов: он вызывает ваш displayUser просмотр. Это представление отображает весь шаблон crud.html (включая javascript!) И возвращает его. Ваш javascript помещает это в место, которое вы определили. Таким образом, после первого вызова AJAX у вас есть некоторая структура вложенных таблиц с двумя javascript блоками, которые работают параллельно.

И затем эти две функции снова начинают вызывать представление, получая полностью визуализированные страницы. Таким образом, через некоторое время вы получили запутанную веб-страницу с несколькими параллельно выполняемыми сценариями, размещающими полностью отображаемые страницы повсюду. Это наверняка поглотит память.

Что вы можете сделать, это проверить, является ли ваш request запрос ajax, и в этом случае визуализировать только внутреннюю таблицу и вернуть ее обратно в javascript: 

def displayUser(request):
    users = CrudUser.objects.all()
    context = {
        'users': users
    }

    if request.is_ajax():
        data = {'rendered_table': render_to_string('table_contents.html', context=context)}
        return JsonResponse(data)

    return render(request, 'crud.html', context)

Подшаблон для внутренней таблицы: 

# table_contents.html
<tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
</tr>
{% for user in users %}
    <tr>
        <td>{{ user.name }}</td>
        <td>{{ user.address }}</td>
        <td>{{ user.age }}</td>
    </tr>
{% endfor %}

Теперь вы можете поместить это в свой шаблон в javascript

$('#_appendHere').html(data.rendered_table);

Одна последняя заметка : В вашей функции ajax я думаю, что это должно быть data_type, а не dataType.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...