CODEWITHSUNDEEP
djangobootstrap-4bootstrap-modal
オパラ
オパラ

Reputation: 317

django: bootstrap modal not displaying

To test modal creations in python with django I created a test app named modalTestApp. Then I copied this html that I got off of the bootstrap website and pasted it into the main.html inside the app, without changing it. The webpage from the app loads fine but clicking the button to preview the modal does nothing. What am I doing wrong here?

main/base.html:

{% load static %}
<!DOCTYPE html>
<html>
    <head>
      <script src={% static "jquery/jquery-3.3.1.slim.min.js" %}></script>
      <script src={% static "jquery/jquery.min.js" %}></script>
      <script type="text/javascript" src={% static 'tablesorter-master/js/jquery.tablesorter.js' %}></script>
      <script src={% static "bootstrap-4.3.1-dist/js/popper.min.js" %}></script>
      <script src={% static "bootstrap-4.3.1-dist/js/bootstrap.min.js" %}></script>
        <style type="text/css">
        .main {
            margin-top: 50px;
            padding: 10px 0px;
        }
        </style>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href={% static "bootstrap-4.3.1-dist/css/bootstrap.min.css" %}>
        <title>{% block title %} {% endblock title %}</title>
    </head>
    <body>
        <nav class="navbar navbar-dar bg-dark pb-0 pr-0">
          <ul class="nav flex-row">
            <p class="navbar-brand mb-0 pt-0" style="color: #eee">Weather Data</p>
            <a href="/", class="nav-link active">Home</a>
            {% if user.is_authenticated %}
              <a href="/stations", class="nav-link active">Stations</a>
            {% endif %}
          </ul>
          <ul class="nav justify-content-end">
          {% if not user.is_authenticated %}
            <a href="/register", class="nav-link active">Register</a>
            <a href="/login", class="nav-link active">Login</a>
          {% else %}
            <a href="/logout", class="nav-link active">logout</a>
            <a href="/users/{{ user.username }}", class="nav-link active">Profile</a>
          {% endif %}
          </ul>
        </nav>
        {% block content %}
        {% endblock content %}
    </body>
</html>

main.html:

{% extends "main/base.html" %}
 {%block content %}
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>
<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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

EDIT:
console output + webpage preview (same before and after button clicked):
enter image description here

Upvotes: 0

Views: 679

Answers (2)

Prabin Sapal
Prabin Sapal

Reputation: 346

It seems like the problem is the template file is not fetching right css and js or may be your directory is not correct. Check my code below its working fine. Thanks

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>

<div class="container">
   <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

  
</div>

</body>
</html>

Upvotes: 0

James Gantz
James Gantz

Reputation: 92

I think that you do not need to write the script tag, you need to write how it is done in the bootstrap documentation - https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template

Just as example

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

You also need to see the django documentation on how to insert static files, this will help you use your pictures, styles, javascript - https://docs.djangoproject.com/en/3.2/howto/static-files/

Also, just as example

settings.py (Root setting)

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/

STATIC_URL = "/static/"
STATICFILES_DIRS = [str(BASE_DIR.joinpath("static"))]

urls.py (root urls)

urlpatterns = [
    path("admin/", admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Upvotes: 2

Related Questions