Django AJAX модальный не появляется - PullRequest
Новая
       5

Django AJAX модальный не появляется

0 голосов
/ 18 февраля 2020

Я пытаюсь отобразить модальную форму при нажатии кнопки, используя ajax, но после нажатия на экране ничего не отображается. Экран становится серым, поэтому сработает модал, но рядом с маленькой серой линией вверху страницы ничего больше не видно. В консоли также нет ошибок, с моей точки зрения это должно быть что-то с дисплеем.

JS функция. Что странно, что hrml_form отображается как неразрешенная переменная, может быть, в этом проблема? 

$(function() {

 $('.js-create-book').click(function() {
   $.ajax({
     url: '/patients/create/',
     type: 'get',
     dataType: 'json',
     beforeSend: function () {
       $("#modal-book").modal("show");
     },
     success: function (data) {
       $("#modal-book .modal-content").html(data.html_form);
     }
   });
 });

});

файл forms.py 

from django import forms
from .models import Patients


class PatientForm(forms.ModelForm):
    class Meta:
        model = Patients
        fields = ('name', 'surname', 'gender', 'birth_date', 'pesel', 'phone', 'email')

views.py 

def patients_create(request):
    form = PatientForm()
    context = {'form': form}
    html_form = render_to_string('dental/partial_patient_create.html',
                                 context,
                                 request=request)
    return JsonResponse({'html_form': html_form})

partal_patient_create. html

{% load widget_tweaks %}

<form method="post">
  {% csrf_token %}
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Create a new book</h4>
  </div>
  <div class="modal-body">
    {% for field in form %}
      <div class="form-group{% if field.errors %} has-error{% endif %}">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {% render_field field class="form-control" %}
        {% for error in field.errors %}
          <p class="help-block">{{ error }}</p>
        {% endfor %}
      </div>
    {% endfor %}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">Create book</button>
  </div>
</form>

пациентов. html

{% extends 'dental/base_layout.html' %} {% load static %}
     {% include "route to the HTML containing the modal" %}
{% block content %}
<div class="page-content p-5" id="content">

    <h1 class="page-header">Patients</h1>

    <p>
    <button type="button" class="btn btn-primary js-create-book">
        <span class="glypicon glypicon-plus"></span>
        New Patient
    </button>
    </p>

    <table id="patients" class="table", style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Surname</th>
            <th>Gender</th>
            <th>Birth Date</th>
            <th>PESEL</th>
            <th>Phone</th>
            <th>E-Mail</th>

        </tr>
    </thead>
    <tbody>
    {% for patient in patient_list %}
    <tr>
        <td>{{ patient.name }}</td>
        <td>{{ patient.surname}}</td>
        <td>{{ patient.gender}}</td>
        <td>{{ patient.birth_date}}</td>
        <td>{{ patient.pesel}}</td>
        <td>{{ patient.phone}}</td>
        <td>{{ patient.email}}</td>

    </tr>
        {% empty %}
        <tr>
          <td colspan="7" class="text-center bg-warning">No book</td>
        </tr>
    {% endfor %}
    </tbody>
</table>

    <div class="modal fade" id="modal-book">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
    </div>
</div>
{% endblock %}

Я был бы очень признателен за любую помощь. Спасибо

...