Call pop up bootstrap modal from another html file

Question

I want to pop up a delete alert message when a delete icon is pressed. The problem is delete pop up modal is in one html file and delete icon is in another html. As I am using django modelform I can not keep bothe of them in a signle html. That's why I have make two different html files. I am trying to connect both of them. But I dont know how to that. I followed an instruction but it is not showing as popup rather it is showing as a normal html.

employee_list.html:

{% extends "base.html" %}
{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'employee/css/master.css' %}">

<div class="">
    <div class="table-wrapper">
      <div class="table-title">
        <div class="row">
          <div class="col-sm-6">
            <h2><b>Employees</b></h2>
          </div>
          <div class="col-sm-6">
            <a href="{% url 'employee:employee-add' %}" data-target="exampleModal" class="btn btn-success" data-toggle="modal">
                            <span ></span>
                            <i class="material-icons"></i>
                            <span data-feather="plus"></span>Add New Employee
                        </a>
            <!--<a href="#deleteEmployeeModal" class="btn btn-danger" data-toggle="modal"><i class="material-icons">&#xE15C;</i> <span>Delete</span></a>-->
          </div>
        </div>
      </div>
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>
              <span class="custom-checkbox">
                                <input type="checkbox" id="selectAll">
                                <label for="selectAll"></label>
                        </span>
            </th>
                        <th>ID</th>
            <th>First Name</th>
                        <th>Last Name</th>
            <th>Email</th>
            <th>Address</th>
            <th>Phone</th>
                        <th>Department</th>
                        <th>Designation</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <!-- Loop for showing employee list in a table-->
          {% for employee in object_list %}
          <tr>
            <td>
              <span class="custom-checkbox">
                  <input type="checkbox" id="checkbox1" name="options[]" value="1">
                  <label for="checkbox1"></label>
                </span>
            </td>
                        <td>{{employee.e_id}}</td>
            <td>{{employee.first_name}}</td>
                        <td>{{employee.last_name}}</td>
            <td>{{employee.email}}</td>
            <td>{{employee.address}}</td>
            <td>{{employee.phone_number}}</td>
                        <td>{{employee.department}}</td>
                        <td>{{employee.designation}}</td>

            <td>
              <a href="{% url 'employee:employee-update' employee.id %}" class="edit" data-toggle="modal">
                                <i class="material-icons" data-toggle="tooltip" title="Edit"></i>
                                <span data-feather="edit-2"></span>
                            </a>
              <a href="{% url 'employee:employee-delete' employee.id %}" date-target="#deleteEmployeeModal" class="delete" data-toggle="modal">
                                <i class="material-icons" data-toggle="tooltip" title="Delete"></i>
                                <span data-feather="trash"></span>
                            </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-end">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#">Next</a>
        </li>
        </ul>
    </nav>
{% endblock %}

employee_delete.html:

<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'dashboard/css/master.css' %}">
  </head>
  <body>
  <h2>Employee delete </h2>
  <div id="deleteEmployeeModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <form>
          <div class="modal-header">
            <h4 class="modal-title">Delete Employee</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            <p>Are you sure you want to delete these Records?</p>
            <p class="text-warning"><small>This action cannot be undone.</small></p>
          </div>
          <div class="modal-footer">
            <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
            <input type="submit" class="btn btn-danger" value="Delete">
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

Answer 1

Insert your modal in employee_list.html , and give the form a post action

<div id="deleteEmployeeModal" class="modal fade">
<div class="modal-dialog">
  <div class="modal-content">
    <form action="POST">
      <div class="modal-header">
        <h4 class="modal-title">Delete Employee</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete these Records?</p>
        <p class="text-warning"><small>This action cannot be undone.</small></p>
      </div>
      <div class="modal-footer">
        <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
        <input type="submit" class="btn btn-danger" value="Delete">
      </div>
    </form>
  </div>
</div>
</div>

Then, In your view insert an if and check if the user wants to delete the employee. In employee_list_view()

def employee_list_view()
# delete employee
if request.method == "POST":
     # some code to delete the employee

...