Модальный бутсрап не открывается

У меня есть некоторые сомнения относительно модала, который я использовал для просмотра данных, моя проблема в том, что когда он находится внутри того же HTML, он открывает модал, когда это другой HTML, он выдает ошибку.

urls.py

    path("modalview/<int:prescription_id>", views.modalview, name="modalview"),

Main.html

    <table class="table table-striped table-bordered border-primary" id="patientTable" >
        <tbody>
            {% for appointment in appointments %}
                <tr>
                    <td><p>Appointment Number: {{ appointment.id }}</p></td>
                </tr>
                <tr>
                    <td><p>Doctor Name: {{ appointment.doctor }}</p></td>
                </tr>
                <tr>
                    <td><p>Appointment Date: {{appointment.date}}, {{ appointment.time }}</p></td>
                </tr>
            {% endfor %}
            {% for prescription in prescriptions %}
                <tr> 
                    <td> <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#exampleModal"   data-ajaxurl="{% url 'modalview' prescription.id }}">     Open modal     </button></td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

view.py

def modalview(request, prescription_id):
    prescription = Prescription.objects.get(id = prescription_id)
    context={
        'prescription': prescription
    }
    return render(request, "ClinicMan/modalview.html", context)

modalview.html


{% load static %}

{% block body %}

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <div class="mb-3">
                <label for="message-text" class="col-form-label"><p>Symptoms: {{ prescription.symptoms }}</p></label>
            </div>
            <div class="mb-3">
              <label for="recipient-name" class="col-form-label"><p>Prescription: {{ prescription.prescription }}</p></label>
            </div>
            <div class="mb-3">
              <label for="message-text" class="col-form-label"><p>Appointment Date: {{ prescription.date }}</p></label>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  {% endblock %}

{% block script %}
    <script type="text/javascript" src="{% static 'ClinicMan/script.js' %}"></script>
{% endblock %}

script.js

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var ajaxUrl = button.data('ajaxurl') // Extract info from data-* attributes
    
    $('#exampleModal-content').load(ajaxUrl)
  })

По этой причине я хотел бы узнать, правильно ли я сделал код или чего-то не хватает.

Я протестировал его с модалом на той же странице, передав только id, и он открылся, но, таким образом, он в итоге не открылся.

Для того чтобы модальное окно работало, должно быть верно следующее:

Сценарий, вызывающий модал (script.js), должен быть указан на первой странице (main.html). В противном случае он не будет существовать, когда вы захотите использовать его при нажатии кнопки.

Элемент, который заполняется модальным содержимым ('#exampleModal-content'), также должен находиться на первой странице (main.html), иначе в объектной модели документа (DOM) страницы некуда будет девать вызываемое содержимое страницы. На данный момент у вас нет элемента с ID с таким именем. У вас есть #example-modal, но он также не находится на первой странице (main.html), поэтому он не будет работать в том виде, в котором он у вас сейчас.

Вернуться на верх