Django & Bootstrap: On Load Modal

Good day

I have the following issue, I have, as far as my knowledge allows me,

I have tried using the bootstrap CDN and also the pip package installer method, but when I try get my modal to show then I cant get it work, could someone have a look at my code and let me know

index.html

{% load static %} {% load bootstrap5 %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Landing Page</title>
        {% comment %} Bootstrap {% endcomment %}
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
            crossorigin="anonymous"
        /> 
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
            crossorigin="anonymous"
        ></script>
        <link rel="stylesheet" href="{% static 'css/style.css' %}" />
        <script type="text/javascript">
            $(window).on("load", function () {
                $("#myModal").modal("show");
            });
        </script>
    </head>
    <body>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
        <div class="modal hide fade" id="myModal">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">x</a>
                <h3>Modal header</h3>
            </div>
            <div class="modal-body">
                <p>One fine body…</p>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn">Close</a>
                <a href="#" class="btn btn-primary">Save changes</a>
            </div>
        </div>
        {% comment %} header {% endcomment %}
        <header>
            <img src="" alt="" />
        </header>

        {% comment %} Main Conntent {% endcomment %}
        <main>
            <div class="row">
                <div class="text-center">
                    <button
                        id="btnSubmit"
                        type="submit"
                        class="btn btn-danger py-2 px-5 text-center d-flex align-items-end"
                    >
                        Enter
                    </button>
                </div>
            </div>
        </main>

        {% comment %} Footer {% endcomment %}
        <footer>
            <p>give it an ice cold shot</p>
        </footer>
    </body>
</html>

According to the documentation I have included bootstarp54 in my installed apps on the settings.py

settings.py

INSTALLED_APPS = [
    'comp.apps.CompConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'cloudinary_storage',
    'django.contrib.staticfiles',
    'cloudinary',
    'bootstrap5',
]

What is the best practice and the best way to load on a modal on load, I am quite new to all frameworks and I have extensively been learning JavaScript for a while,

Does anyone know if jQuery is included in the pip install pacakges method?

You are trying to use jquery, when it is not necessary (and not available as far as I can see)

You can just use vanilla JS:

window.onload = (event) => {
  console.log("page is fully loaded");
};
Back to Top