Django & Bootstrap: On Load Modal-CodePudding

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/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384- 0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7 AMvyTG2x"
            crossorigin="anonymous"
        /> 
        <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/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"  data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
        <div  id="myModal">
            <div >
                <a  data-dismiss="modal">x</a>
                <h3>Modal header</h3>
            </div>
            <div >
                <p>One fine body…</p>
            </div>
            <div >
                <a href="#" >Close</a>
                <a href="#" >Save changes</a>
            </div>
        </div>
        {% comment %} header {% endcomment %}
        <header>
            <img src="" alt="" />
        </header>

        {% comment %} Main Conntent {% endcomment %}
        <main>
            <div >
                <div >
                    <button
                        id="btnSubmit"
                        type="submit"
                        
                    >
                        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?

CodePudding user response：

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");
};