Почему мое приложение jquery в Django не работает? - PullRequest
Новая
       1

Почему мое приложение jquery в Django не работает?

0 голосов
/ 05 ноября 2018

Я реализую форму раскрывающегося списка с помощью JQuery и Django. Тем не менее, я до сих пор не знаю, почему этот jquery не работает.

Мой шаблон: 

{% block style %}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/style.css' %}"/>
{% endblock %}

{% block script %}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type='text/javascript' src="{% static 'js/ajax_load_rooms.js' %}"></script>
{% endblock %}

{% block content %}
    <div class="container-">
        <div class="wrapper">
            <form id='selectForm' method="post" data-rooms-url="{% url 'ajax_load_rooms' %}">
                {% csrf_token %}
                        <div class="building">
                  <label for="building">Nhà học</label>
                  {{ form.building }}
                </div>
                <div class="room">
                             <label for="room">Phòng học</label>
                               {{ form.room }}
                </div>
                <button class="show-list btn btn-primary" >Thoi gian bieu</button>
            </form>
        </div>
    </div>
{% endblock %}

dropdown_room_list.html 

<option value="">-------</option>
{% for room in rooms %}
<option value="{{ room.pk }}">{{ room.room }}</option>
{% endfor %}

Мой jquery: 

$("#id_building").change(function () {
  var url = $("#selectForm").attr("data-rooms-url");
  var buildingId = $(this).val();

  $.ajax({
    url: url,
    data: {
      'building': buildingId,
    },
    success: function (data) {
      $("#id_room").html(data);
    }
  });

});

Мой взгляд: 

def load_rooms(request):
    building = request.GET.get('building')
    room_list = Room.objects.filter(building__bid=building, availability=True)
    return render(request, 'dropdown-room-list.html', {'rooms': room_list})

Мои URL: 

from django.urls import path
from django.contrib.auth import views as auth_views

from .forms import LoginForm
from .views import *

urlpatterns = [
    path('accounts/login/', auth_views.LoginView.as_view(authentication_form=LoginForm, redirect_authenticated_user=True), name='login'),
    path('accounts/logout/', auth_views.logout_then_login, name='logout'),
    path('booking/list/', BookingListView.as_view(), name='booking_list'),
    path('booking/add/', BookingCreateView.as_view(), name='booking_add'),
    path('booking/<int:pk>/delete', BookingDeleteView.as_view(), name='booking_delete'),
    path('timetable/select/', TimetableSelectView.as_view(), name='select'),
    path('timetable/<str:building>/<str:room>/<int:year>/<int:week>', TimetableRoomView.as_view(), name='room_timetable'),
    path('ajax/load_rooms', load_rooms, name='ajax_load_rooms')
]

Визуализированный HTML: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Tim phong</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="/static/css/style.css"/>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type='text/javascript' src="/static/js/ajax_load_rooms.js"></script>

</head>
<body>
    <header>
        <nav class="nav-bar">
            <ul class="left list">
                <li><a href="/booking/list/">Quản lý</a></li>
                <li><a href="/timetable/select/">Đặt phòng</a></li>

            </ul>
            <ul class="right list">
                <li><a href="/accounts/logout/">Đăng xuất</a></li>
            </ul>
        </nav>
    </header>

    <div class="container-">
        <div class="wrapper">
            <form id='selectForm' method="post" data-rooms-url="/ajax/load_rooms">
                <input type='hidden' name='csrfmiddlewaretoken' value='qvLwYOC9fKVkADkklqhL29UWNduOqJjwAlFYdLd6t03qWZ9z30z0BCsSElGoRsla' />
                        <div class="building">
                  <label for="building">Nhà học</label>
                  <select name="building" class="form-control form-control-sm" required id="id_building">
  <option value="" selected>---------</option>

  <option value="B1">Lecture Hall B1</option>

</select>
                </div>
                <div class="room">
                             <label for="room">Phòng học</label>
                               <select name="room" class="form-control form-control-sm" required id="id_room">
  <option value="" selected>---------</option>

  <option value="3">B1/101</option>

</select>
                </div>
                <button class="show-list btn btn-primary" >Thời gian biểu</button>
            </form>
        </div>
    </div>

</body>

Обратите внимание, что мой статический путь в javascript правильный, шаблон хорошо отрисован, и я вижу путь к javascript к нужному коду. Но функциональность зависимого выпадающего списка, похоже, не работает.

1 Ответ

0 голосов
/ 05 ноября 2018

Хорошо, поскольку я обнаружил, что в вашем коде отсутствуют две вещи -

  1. Не удалось найти id_building id в вашем шаблоне.
  2. в ajax-запросе type (method) отсутствует, что составляет post при отправке данных.

Только для изменения выбора building вы хотите обновить room. В этом случае вы можете использовать только ajax запрос на building selection- 

  $("#id_building").change(function () {       
      $.ajax({
        url: "/ajax/load_rooms",
        method: "GET",
        async' false,
        data: {
          building : $(this).val(),
        },
        success: function (data) {
          //check your data
          console.log(data);
          // if data in id->room name format, it will work
          // if not change as per result data
          $.each(data, function(key, value) {
                htmlOption += '<option value="' + itemsMarque[key].id + '">'+ itemsMarque[key].name + '</option>';
            });

           $("#id_room").html(data);
         }
      });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...