Как через AJAX запрос добавить элементы Django-шаблона

Question

У меня есть две модели:

class GroupOfdishes(models.Model):
    group = models.CharField(max_length=42, verbose_name="Группа блюд")

class Dishes(models.Model):
    name = models.CharField(max_length=100, verbose_name="Наименование блюда")
    mass_of_dish = models.IntegerField(verbose_name="Выход блюда")
    recipe_number = models.CharField(max_length=20, verbose_name="Номер рецептуры", null = True)
    picture = models.ImageField(upload_to='picture_of_dish')
    group = models.ForeignKey(GroupOfdishes, on_delete=models.CASCADE)

На основе модели GroupOfdishes происходит заполнение группы выпадающих кнопок и заготовка под карусель (bootstrap)

<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выберите группу блюд
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
{% for group in groups %}
<button class="dropdown-item" id="{{ group.pk }}">{{ group.group }}</button>
{% endfor %}
</div>
<div id="carouselReviews" class="carousel slide 1111" data-ride="carousel" data-interval="false">
  <div class="carousel-inner" id="carousel-inner">
  </div>
  <a class="carousel-control-prev" href="#carouselReviews" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselReviews" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
  </a>
</div>

Я хочу что бы по событию "клика" на button, выполнялся код Jquery (мои попытки представлены ниже):

$( document ).ready(function() {
        $('button').click(function(){
              event.preventDefault();
              $.ajax({
              method: "GET",
              url: '{% url 'Ajax_request' %}',
              dataType:"json",
              data: { group_pk: $('button').attr('id'); },
              success: function(){
                $("#carousel-inner").html(data);
              }
        });
        });
     });

Код jquery выполняет Ajax запрос, который обрабатывается функцией в Views.py(я понимаю что это все овнокод, я новичок в этом, стараюсь исправиться).

Обработка url адреса:

path('ajaxrequest/', views.ajax_request, name='Ajax_request'),

Функция Views.py:

def ajax_request(request):
    dishes = Dishes.objects.filter(group = request.GET.get('group_pk'))
    return render(request, 'testing/dishes.html',{ 'dishes' : dishes })

Эта функция в свою очередь отрисовывает html - dishesh.html с переданным контекстом:


<div class="carousel-inner" id="carousel-inner">
    {% for dish in dishes %}
    {% if forloop.counter == 1 %}
    <div class="carousel-item active">
    {% else %}
    <div class="carousel-item">
        {% endif %}
        <div class="row align-items-center">
            <div class="col-7 offset-md-1">
                <img src="{{ dish.picture.url }}" class="img-thumbnail d-block m-auto pb-3 border-0" alt="">
            </div>
            <div class="col-3">
                <div class="review align-center">
                    {{ dish.name }}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

и в результате Ajax запрос получает в success готовый элемент карусели, который подставляется вместо заготовки:

 success: function(){
                $("#carousel-inner").html(data);
              }

Но это не работает по нескольким причинам:

не происходит передачи через Ajax запрос data: { group_pk: $('button').attr('id'); },
в качестве проверки вместо $('button').attr('id'); я подставляю готовое значение, например 2, тогда запрос передается с group_id = 2 (вижу это в терминале), но возврата готового html кода нет.

БЛОГ НА HUSL

Как через AJAX запрос добавить элементы Django-шаблона

Ответы (0 шт):