Bootstrap - Menu déroulant dans la barre de navigation
Bonjour,
Je développe une appli web à base de Django et Bootstrap. J'ai une page base.html où je défini le squelette de mes page, et notament la barre de menu avec les liens vers les différentes pages.
Dans cette barre de menu, j'ai un item de type dropdown qui ouvre un menu déroulant.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| {% load static %}
<html>
<head>
<title>{% block title %}Test Django LDAP{% endblock title %}</title>
{% load bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
{% block css %}
<link href="{% static 'lib/fontawesome-free-6.4.2-web/css/all.min.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/custom.css' %}" rel="stylesheet" type="text/css">
{% endblock css %}
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon">
</head>
<body>
<div class="container">
<div id="nav-placeholder">
<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="{% url 'index' %}">
<img src="{% static 'img/logo3.png' %}" width="100" alt="" class="d-inline-block align-middle mr-2">
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link navbar-btn dropdown-toggle" href="#" id="userItem" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Utilisateurs
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{% url 'project_users' %}">Liste</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Créer</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbar-btn dropdown-toggle" href="#" id="projectItem" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Projets
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{% url 'project_listing3' %}">Liste</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="{% url 'project_create' %}">Créer</a></li>
<li><a class="dropdown-item" href="#">Modifier</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div>
{% block scripts %}{% endblock scripts %}
</body>
</html> |
Tout fonctionne bien jusqu'à ce que l'item du menu déroulant que je sélectionne pointe vers une page qui contient un formulaire.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| {% extends "base.html" %}
{% load static %}
{% block content %}
<form id="formCreate" method="POST" class="post-form needs-validation" enctype="multipart/form-data" novalidate>
{% csrf_token %}
<div class="row">
<div class="col-md-4">
<div class="input-group mb-3">
<label class="input-group-text" for="project_name">Nom</label>
<input type="text" class="form-control" id="project_name" name="project_name">
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-4" id="userSelection"></div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#loginModal" id="btnCreate" name="btnCreate">Créer</button>
</div>
</form>
{% endblock content %}
{% block scripts %}
<script type="text/javascript" src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<script>
$(document).ready(function(){
$("#userSelection").load("user_selection");
});
</script>
{% endblock scripts %} |
Dans ce formulaire, j'ai une div qui affiche une vue d'une autre page.
Dans ce cas, la page s'affiche bien, mais quand je clique sur l'item de la barre de navigation, ça n'ouvre plus le menu déroulant. Du coup, je reste bloqué sur cette page.
Si j'enlève le chargement de la vue dans le formulaire au chargement de la page, ça fonctionne, j'ai accès au menu déroulant.
Pourquoi ?
Merci,
Nico
