Обновить элемент <div>, сгенерированный шаблоном django

Question

Как обновить определенный элемент в шаблоне Django?
Пример:

{% if object.some_m2m_field.all %}
    <h3>The stuff I want to refresh is below</h3>
    <div id="the-div-that-should-be-refreshed">
    {% for other_object in object.some_m2m_field.all %}
        <a href="www.example.com">{{ other_object.title }}</a>
        &nbsp;
    {% endfor %}
    </div>
{% endif %}

Допустим, какой-то другой элемент на странице запускает JavaScript, который должен обновить div выше. Есть ли способ заставить django обновить этот конкретный элемент в шаблоне?

Если нет, то мне придётся пропатчить патч div, используя обычные методы JS или jQuery, и не использовать всю мощь шаблонного слоя django. Кроме того, приведенный выше код является упрощением фактического шаблона, я использую большую часть силы шаблона, так что исправление обезьяны в полученном html будет кошмаром...

Answer 1

Вы можете использовать асинхронный запрос для заполнения элемента div. На асинхронный запрос отвечает django, используя шаблонизатор.

В этом случае вам придется перенести код шаблона элемента div в отдельный файл шаблона.

ОБНОВЛЕНО ПРИМЕРОМ:

Javascript:
Для асинхронного обновления представления используйте JQuery, например:

$.ajax({
  url: '{% url myview %}',
  success: function(data) {
  $('#the-div-that-should-be-refreshed').html(data);
  }
});

Асинхронный просмотр:

def myview(request):
    object = ...
    return render_to_response('my_template.html', { 'object': object })

Шаблон:

{% for other_object in object.some_m2m_field.all %}
    <a href="www.example.com">{{ other_object.title }}</a>
    &nbsp;
{% endfor %}

С наилучшими пожеланиями!

Answer 2

Вы можете взглянуть на например. этот учебник Ajax с Django. В любом случае, как уже упоминалось выше, вы всегда можете использовать шаблонизатор django, независимо от того, вызывается ли представление в обычном или ajax-запросе! Если вам нужно использовать ajax с django чаще, имеет смысл взглянуть на что-то вроде dajax, который является библиотекой ajax для django (посмотрите там учебники).

Answer 3

Что я сделал, так это поместил весь код в функцию заданного интервала, таким образом я буду отображать местоположение каждые 5 секунд.

      The base
setInterval(() => {
    //code to execute
            }, 5000);


Applying to my div
setInterval(() => {
                console.log("interval")
                    $.ajax({
                    url: window.location.pathname,
                    async: false,
                    type: 'POST',
                    data: {
                        'action': 'graph_ubicacion',
                        'id': id
                    },
                    dataType: 'json',
                    
                    
                }).done(function (data) {
                    //console.log("DEBUG 83 === ", data)
                    
                    if (!data.hasOwnProperty('error')) {
                        //Proceso cuando se elije una ubicacion (después de tener una respuesta
                        dataCharArray = [
                            ['Nombre', 'X', 'Y', 'Tipo'],
                        ];
                        
                        if (data.hasOwnProperty('todas')) {
                            data['todas'].forEach(function (elemento) {
                                dataCharArray[dataCharArray.length] = elemento;
                                //console.log("DEBUG 91 === ", elemento)
                                
                            });
                        }
                    
                        if (data.hasOwnProperty('target')) {
                            data['target'].forEach(function (elemento) {
                                dataCharArray[dataCharArray.length] = elemento;
                                    console.log("DEBUG 102 === ", elemento, "\n")
                                    console.log("DEBUG 102 === ", elemento[0], "\n")
                                    console.log("DEBUG 102 === ", elemento[1], "\n")
                                    console.log("DEBUG 102 === ", elemento[2], "\n")
                                    console.log("DEBUG 102 === ", elemento[3], "\n")
                                
                                
                            });
                            
                        }

                        if(data['todas'].length > 0 && data['target'].length > 0){
                            google.charts.load('current', {
                                    'packages': ['corechart']
                                }
                            );
                            google.charts.setOnLoadCallback(drawSeriesChart);

                        }else{
                            if(data['todas'].length === 0 && data['target'].length === 0){
                                //MensajeAlerta("No hay Datos para mostrar");
                                console.log("No hay datos para mostrar")
                            }else{
                                if(data['todas'].length === 0){
                                    MensajeAlerta("No hay Balizas para mostrar");
                                }
                                if(data['target'].length === 0){
                                    MensajeAlerta("No hay Historial de datos de Pulseras para mostrar.");
                                }
                            }
                        }
                        return false;
                    } else {
                        MensajeError(data['error']);
                    }
                    
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    MensajeError(textStatus + ': ' + errorThrown);
                }).always(function (data) {

                })

            }, 5000);