Проблема извлечения нескольких элементов HTML DOM для AJAX с помощью Django

Question

Я пытаюсь реализовать функцию в веб-приложении, где у меня есть меню с пиццей, а цена, указанная на каждой карте (функция взята с Bootstrap), динамически обновляется в зависимости от стиля (обычный / сицилийский), размера (маленький / большой) и название (сыр / особый) пиццы выбраны. Я использую цикл для создания всех карт, запрашивая базу данных, используя ORM в бэкэнде, который берет все существующие пиццы, добавленные владельцем ресторана, и создает пункт меню для каждой из них. Затем я собираюсь извлечь выбор имени, стиля и размера для каждого и дать динамический рендеринг цены на этот конкретный тип пиццы в ценовой области карты, используя AJAX, прежде чем реализовать функцию оформления заказа, посредством чегопользователь покупает эту пиццу. В основном проблема заключается в том, что я не уверен, как извлечь выбор имени, стиля и размера, учитывая, что карты реализованы с использованием шаблонного цикла, а также я думаю, что в моем AJAX / бэкэнде есть несколько мелких ошибок. Но я подозреваю, что решение будет связано с ForEach () Javascript после того, как я извлечу массив стилей из карт? Я действительно не знаю, как мне поступить. Мой код:

views.py:

from django.http import HttpResponse, Http404, HttpResponseRedirect, JsonResponse
from django.contrib.auth.models import User
from django.shortcuts import render
from .models import Topping, Size, Pizza, Sub, Pasta, Platter, Salad, pizza_styles, sizes
from django.urls import reverse


# Create your views here.
def index(request): # this home page will be the menu page
    return render(request, "orders/index.html")

def pizza(request): # this home page will be the menu page
    styles = [x[0] for x in pizza_styles]
    # these lists have to be created because pizza_styles and sizes are naturally a list of tuples
    propSizes = [x[0] for x in sizes]
    context = {
    'pizzas': Pizza.objects.all(),
    'styles': styles,
    'sizes': propSizes,
    }
    print(propSizes, styles, Pizza.objects.first().name) # diagnostic purposes
    return render(request, "orders/pizza.html", context)

#below is the function I'm currently stuck on (the front end is the tough part I think)
def get_price(request):
    style = request.GET.get('style', None)
    size = request.GET.get('size', None)
    name = request.GET.get('name', None)
    data = {
    'price' = Pizza.objects.filter(name=name, style=style, size=size).price
    # get the pizza style, size, and type from the front end and query database on those filters to get price
    }
    return JsonResponse(data)

urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("pizza", views.pizza, name="pizza"),
    path("get_price", views.get_price, name='get_price'),
]

pizza.html:

{% extends "orders/index.html" %}
{% block item %}
  <main class="containerX">
<div class="row">
  {% for pizza in pizzas %}
        <div class="card border-primary mb-3" id="card">
            <div class="card-body">
              <h5 class="card-title" id="name">{{ pizza.name }}</h5>
              <p class="card-text">
                <select id="style">
                  {% for style in styles %}
                      <option value="{{ style }}">{{ style }}</option>
                  {% endfor %}
                  </select>
                </p>
              <p class="card-text">
                <select id="size">
                  {% for size in sizes %}
                      <option value="{{ size }}">{{ size }}</option>
                  {% endfor %}
                  </select>
               </p>
              <p class="card-text" id="price"> price depending on selection </p>
              <a href="#" class="btn btn-primary">Add to Cart</a>
            </div>
        </div>
  {% empty %}
  <h2>No pizzas currently on offer. Sorry!</h2>
  {% endfor %}
</div>
  </main>


    <script>
        var size = document.querySelector('#size').value;
        var name = document.querySelector('#name').textContent;
        var style = document.querySelector('#style').value;
        var price = document.querySelector('#price').value;
        console.log(size, name, style, price)

        // load default price set up in python too

        (style.onchange || size.onchange)  = function(){
          // then send the ajax request
          $.ajax({
                  url: '/get_price', // implement this url that will send back data
                  data: { // communication with the backend is to get the price from the database
                    'size': size,
                        'name': name,
                        'style': style,
                  },
                  dataType: 'json',
                  success: function (data) {
                    // simply update price here
                      price = data['price']
                      console.log(price)
                  }
                });
        };
    </script>

{% endblock %}

У меня есть элементарное понимание того, как работают AJAX и Django, и я думаю, что мой код для views, urls и pizza.html в принципе правильный,но есть небольшие детали реализации, с которыми я не совсем могу справиться, несмотря на дни разочарования.

Answer 1

Похоже, вы пытаетесь прослушать событие изменения фактического значения, но вам нужно прослушать узел Dom. Также убедитесь, что вы включаете jquery перед вашим JavaScript, так как $ .ajax является функцией jquery. Попробуйте изменить свой JavaScript на следующее:

<script>
    var size = document.querySelector('#size');
    var name = document.querySelector('#name').textContent;
    var style = document.querySelector('#style');
    var price = document.querySelector('#price').value;
    console.log(size, name, style, price)

    // load default price set up in python too

    (style.onchange || size.onchange)  = function(e){
      var styleValue = e.target.value;
      var sizeValue = e.target.value;
      // then send the ajax request
      $.ajax({
              url: '/get_price', // implement this url that will send back data
              data: { // communication with the backend is to get the price from the database
                'size': sizeValue,
                    'name': name,
                    'style': styleValue,
              },
              dataType: 'json',
              success: function (data) {
                // simply update price here
                  price = data['price']
                  console.log(price)
              }
            });
    };
</script>

Дайте мне знать, если у вас возникнут дополнительные проблемы, и я постараюсь помочь.