Django загрузка html шаблон фрагмента из js при изменении ввода - PullRequest
Новая
       22

Django загрузка html шаблон фрагмента из js при изменении ввода

0 голосов
/ 16 апреля 2020

У меня есть шаблон Django, который загружает список объектов, для каждого объекта я загружаю шаблон. Вот HTMLs

client-home. html: 

{% extends 'base.html' %}
{% load static %}
{% block content %}
    <div class="row">
        <div class="col-md-2">
            <div class="col">
                <label for="city">City</label>
                <input name="city" type="text" class="form-control" id="city" value="{{ app_user.city }}">
            </div>
            <div class="col mb-3">
                <label for="category">Category</label>
                <select name="category" class="custom-select" id="category">
                    <option value="" selected>All</option>
                    {% for category in categories %}
                        <option value="{{ category.0 }}">{{ category.1 }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="col-md-10">
            <ul class="list-group list-group-horizontal" id="offers-list">
                {% for o in city_offers %}
                    {% include "offer-snippet.html" with offer=o  %}
                {% endfor %}
            </ul>
        </div>
    </div>
{% endblock %}

offer-snippet. html: 

<div class="row offer-box m-2">
    <div class="col-5 p-0">
        <img src="{{ o.owner.image.url }}" width="120" height="120" class="img-grey-bg">
    </div>
    <div class="col-7">
        {{ o.owner.name }}
        {{ o.city }}, {{ o.delivery_date }}
        <span class="badge badge-primary badge-pill">{{ o.current_subscribers }} / {{ o.min_subscribers }}</span>
    </div>
</div>

Вот модель.py: 

class BusinessOffer(models.Model):
    owner = models.ForeignKey(AppUser, related_name='offers', on_delete=models.CASCADE)
    created = models.DateTimeField(auto_now_add=True)
    city = models.CharField("City", max_length=50, )
    delivery_date = models.DateField()
    min_subscribers = models.IntegerField()
    subscribers = models.ManyToManyField(AppUser, related_name='offers_subscribed_to')

    @property
    def current_subscribers(self):
        return len(self.subscribers.all())

Как видите, в клиентском доме. html есть 2 поля ввода. Я хотел бы обновить список элементов в соответствии с выбором в этих входах. Я начал создавать JS AJAX вызов представления JSONResponse, но я застрял на том, как на самом деле загрузить каждый фрагмент для каждого элемента, вот что у меня пока так:

views.py: 

def client_home(request):
    context = dict()
    try:
        loggedUser = AppUser.objects.get(user__username=request.user.username)
        context['app_user'] = loggedUser
    except Exception as e:
        messages.info(request, 'Please login')
        print("User not logged in")
        return render(request, 'registration/login.html')

    city_offers = support_func.get_city_offers(loggedUser.city)
    context['city_offers'] = city_offers
    context['categories'] = CATEGORIES
    return render(request, "client-home.html", context)

def get_offers_by_city_cat(request):
    data = {}
    try:
        city = request.GET.get('city')
        category = request.GET.get('category')
        city_offers = support_func.get_city_offers(city)
        data = {
            "offers": city_offers
        }
    except Exception as e:
        return JsonResponse(data)
    return JsonResponse(data)

скриптов. js: 

$('#city').on('change', function () {
    var url = '/offer/data';
    var city = this.value;
    $.ajax({
        method: "GET",
        url: url,
        data: {
            'city': city
        },
        success: function (data) {
            var listHtml = '';
            for (var i = 0; i < data["offers"].length; i++) {
                listHtml += ?????
            }
        },
        error: function (data) {
            alert("error")
        }
    })
});

Первая функция из view.py - client_home успешно работает, и список загружается из исходного города. Однако я не могу думать о том, что должно быть в функции успеха вызова AJAX, чтобы я заменил текущий список списком из данных ["предложений"]? Как я могу загрузить фрагмент для каждого предложения и установить контекст этого фрагмента для текущего предложения в l oop?

Большое спасибо!

...