Dropdown not working on only one html page

Siam 0
Viewed 18

I recently added a dropdown on the navbar. It works on all pages except one. It's the page where I did all my work on. I have browsed around for hours and found no solution. Here is my base.html. I extended this page to all other pages.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Project</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

{% load static %}
    <link rel="stylesheet"  href="{% static '/css/bootstrap.min.css' %}">

<style>
        img {
            border-radius: 50%;
        }
</style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <ul class="nav navbar-nav">
                <li><a class="navbar-brand" href="{% url 'index' %}"> Project </a></li>
                <li><a class="navbar-brand" href="{% url 'MyTestApp:register' %}"> Register </a></li>
                <li><a class="navbar-brand" href="{% url 'admin:index' %}"> Admin </a></li>



                {% if user.is_authenticated %}
                    <li><a class="navbar-brand" href="/show/"> Trainee </a></li>
                    <li><a class="navbar-brand" href="/showCourse/"> Course </a></li>
                    {% if user.is_superuser %}
                        <li><a class="navbar-brand" href="/accounts/"> Accounts </a></li>
                    {%endif%}
                    <li class="nav-item dropdown">
                        <a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          More
                        </a>
                        <div class="dropdown-menu" id="dropdown123" aria-labelledby="navbarDropdownMenuLink">
                          <a class="dropdown-item" href="#">Settings</a>
                          <a class="dropdown-item" href="#">About</a>
                          <a class="dropdown-item" href="{% url 'user_logout' %}"> Logout </a>
                        </div>
                      </li>

                    <li>
                        <a href="#" class="navbar-brand my-2 my-sm-0">
                        {% if profile.profile_pic %}
                            <img src="{{ profile.profile_pic.url }}"  alt="Avatar" width="30" height="30" >
                        {% else %}
                            <img src="/media/traineeImg/123.png" alt="Avatar" width="30" height="30" >
                        {% endif %}

                        {{user.username}}
                        </a>
                    </li>


                {% else %}
                    <li><a class="navbar-brand" href="{% url 'MyTestApp:user_login' %}"> Login </a></li>

                {% endif %}


            </ul>
        </div>
    </nav>


<div class="container">
    {% block body_block %}

    {% endblock %}
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Here is my index.html, one of the pages where the navbar dropdown is working

{% extends "MyTestApp/base.html" %}
{% block body_block%}
<meta name="viewport" content="width=device-width, initial-scale=1">
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
{% load static %}
<link rel="stylesheet" href="{% static '\css\bootstrap.min.css'%}">
</head>
<body>
<div class="container">
    <div class="jumbotron">
        {% if user.is_authenticated %}
            <h2> Hello {{user.username}}.</h2>
            <h2> Welcome back.</h2>
        {% else %}
            <h2> Welcome Project</h2>
            <h2> Please Login In If You Want To Use Our Site. </h2>
        {% endif %}
    </div>
</div>
</body>
</html>
{% endblock %}

This is the only page where navbar dropdown does not work :

{% extends "MyTestApp/base.html" %}
{% block body_block%}
<html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
{% load static %}
<link rel="stylesheet" href="{% static '\css\bootstrap.min.css'%}">

<body style="background-color:gray;">

<div>
    <br>

    <caption> List of Trainees </caption><br><br>

    <div style="width: 1250px" >
        <div style="height: 500px; overflow: auto; ">
            {% if user.is_authenticated %}
            <table class="table table-light  table-sm" >
                <thead class="thead-dark thead-fixed"  >
                    <tr class="text-white">
                        <th scope="col"> User&nbsp;&nbsp;</th>
                        <th scope="col"> ID &nbsp;&nbsp;</th>
                        <th scope="col"> Name  </th>
                        <th scope="col"> Gender </th>
                        <th scope="col"> Education</th>
                        <th scope="col"> Course  </th>
                        <th scope="col"> Batch No </th>
                        <th scope="col"> Date Of Birth  </th>
                        <th scope="col"> Contact No </th>
                        <th scope="col"> Contact Address </th>
                        <th scope="col"> Email Address </th>
                        <th scope="col"> Action </th>
                    </tr>
                </thead>


                <tbody style="height:500px">

                        {% for trainee in trainees %}

                            <tr>
                                <td>
                                {% if trainee.TraineePic %}
                                    <img src="{{ trainee.TraineePic.url }}" width="30" height="30">
                                {% else %}
                                    <img src="/media/traineeImg/123.png" width="30" height="30">
                                {% endif %}
                                </td>
                                <td > {{trainee.TraineeID}} &nbsp;&nbsp;</td>
                                <td> {{trainee.Name}} &nbsp;&nbsp;</td>
                                <td> {{trainee.Gender}} </td>
                                <td> {{trainee.Education}} </td>
                                <td> {{trainee.Course}} </td>
                                <td> {{trainee.BatchNo}} </td>
                                <td> {{trainee.DateofBirth}} </td>
                                <td> {{trainee.ContactNo}} </td>
                                <td> {{trainee.ContactAddress}} </td>
                                <td> {{trainee.EmailAddress}} </td>
                                <td>
                                    <button  name="editbtn" > <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="dark" class="bi bi-brush-fill" viewBox="0 0 16 16">
                                    <path d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.067 6.067 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.118 8.118 0 0 1-3.078.132 3.659 3.659 0 0 1-.562-.135 1.382 1.382 0 0 1-.466-.247.714.714 0 0 1-.204-.288.622.622 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896.126.007.243.025.348.048.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04z"/>
                                    </svg></button>

                                    <button name="deletebtn" onclick="deleteTrainee({{trainee.TraineeID}})"   ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="dark" class="bi bi-trash-fill" viewBox="0 0 16 16">
                                    <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
                                    </svg></button>

                                </td>
                        {% endfor %}

                            </tr>


                </tbody>


        </table>

        </div>
    </div>


            {% endif %}

</div>
<br>

<!--Modal Button-->

<!--=======================================================================================-->
<button type="button" class="btn btn-dark " id="savebtn" >
    Add a Trainee
</button>


<!--Delete Modal-->
<!--===============================================================================================================-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModal"...>

<!-- Save Modal-->
<!--=======================================================================================-->
<div class="modal fade bg-example-modal-lg" id="saveModal" tabindex="-1" role="dialog" aria-labelledby="saveModal" aria-hidden="true"... >
</div>    
   
<!--Edit Modal-->
<!--============================================================================================-->
<div class="modal fade bd-example-modal-lg" id="editModal" tabindex="-1" role="dialog" aria-label="editModal" aria-hidden="true"...>
 
</div>


</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</html>
{% endblock %}
jquery html python
0 Answers
Related