Django, отфильтруйте список с помощью AJAX

Question

Я пытаюсь создать фильтр, который фильтрует список при нажатии (значения параметров). Я знаю, что есть другие вопросы, похожие на это, но я просто не могу понять это.

views.py

def gps_list(request):
    selected_programme = request.GET.get("selected_programme", None)

    gps = GoodPractice.objects.filter(
       id__in=ProgrammeList.objects.filter(programme__exact=selected_programme))
    print(gps)

    data = serializers.serialize("json", gps)
    return JsonResponse(data, safe=False)

Это мой сценарий

<script>
    $("#programme").change(function () {
      event.preventDefault();
          var selected_programme = $(this).val();
          console.log(selected_programme);
      $.ajax({
        url: '{% url "gps_list" %}',
        data: {
          "selected_programme": selected_programme,
        },
        dataType: 'json',
        success: function(response) {
            alert(response);
          },
          error: function(response) {
            alert("oh no!");
          }
      });
    });
</script>

<div class="row">
            <div class="form-group col-sm-4">
            <fieldset>
            <legend>Select programme type:</legend>
              <label for="programme">Programme type: *<abbr title="required"></abbr></label>

              <form action="{% url 'gps' %}" method="get">
              <select class="form-control" id="programme" name="progr" size="6" multiple>
                {% for programme in progr %}
                  <option  value={{programme.id}} {% if programme.id in progr_selected %}selected{% endif %}>{{programme.name}}</option>
                {% endfor %}
              </select>
            </div>
            </div>

  {% autoescape off %}
  {% for gp in gps %}
  <div class="row">
    <div class="col-md-12">
      <h2 class="my-4">{{gp.name}}
        <small>{{gp.country}}</small>
      </h2>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="card mb-4">
        <div class="card-body">
          <h2 class="card-title">{{gp.programme_type}}</h2>
          <p class="card-text">{{gp.what}}</p>
          <a href="{% url 'gps' %}/{{gp.id}}" class="btn btn-primary">Read More &rarr;</a>
        </div>
      </div>
    </div>
  </div>
  </fieldset>
  {% endfor %}
  {% endautoescape %}
</div>

Итак, мне нужно найти способ фильтрации {{gp.name}}, {{gp.country}} {{gp.programme_type}} & {{gp.what}}.

В настоящее время print(gps) работает правильно. alert(response) показывает данные, но когда я использую alert(response.data), я получаю undefined.

Answer 1

Причина, по которой функция fetchDataAndDisplay не вызывается, заключается в том, что вы добавили прослушиватель событий щелчка к элементу с id , равным «btn-primary», но кнопка имеет класс"btn-primary".

// Change the "#btn-primary" to ".btn-primary"
$(".btn-primary").click(function() {
    fetchDataAndDisplay();
});

Вы должны быть осторожны, поскольку все кнопки с классом "btn-primary" будут запускать это действие. Я бы посоветовал использовать идентификатор, относящийся к действию кнопки, например «gps-form-submit», для кнопки, а не для класса.

Также вы можете передать функцию fetchDataAndDisplay непосредственно в качестве обратного вызова в прослушивателе событий щелчка, например $("#btn-primary").click(fetchDataAndDisplay).

Что касается того, что на самом деле будет обрабатывать ваш AJAX-вызов, вам потребуется создать отдельное представление, которое возвращает объект HttpResponse из Django или объект Response из Django Rest Framework .

Есть несколько других проблем с вашим кодом; эта часть вашей разметки не имеет смысла:

      <div class="row">
        <div class="col-sm-12">
          <button type="submit" class="btn btn-primary">Submit selections</button>
          </form>
        </div>
      </div>

Вы открыли два новых элемента div вокруг закрывающего тега формы без открывающего тега внутри его ближайшего родителя. Что-то вроде этого имело бы больше смысла:

  <form>

      <!-- rest of code -->

      <div class="row">
        <div class="col-sm-12">
          <button type="submit" class="btn btn-primary">Submit selections</button>
        </div>
      </div>
  </form>

Для этого раздела я бы рекомендовал изучить использование литералов шаблона :

str += '<div class="item-details">' + 
       'User Id is = ' + data[i].userId + '<br />' +
       'Id is= ' + data[i].id + '<br />' +
       'Title is = ' + data[i].title + '<br />' +
       '</div>';

Это будет выглядеть примерно так:

str += `<div class="item-details">
            User Id is = ${data[i]}<br />
            Id is = ${data[i].id}<br />
            Title is = ${data[i].title}<br />
        </div>`

Это проще для чтения и избавляет от необходимости загружать конкатенацию строк.