Conflit bootstrap et jquery

**Niko21** · 07/07/2020, 16h53

Bonjour,
j'ai un problème depuis quelques temps que je n'arrive pas à résoudre.
Dans mon projet, j'utilise bootstrap d'un côté et un fichier en jquery perso.
Le problème, c'est que je n'arrive pas à faire fonctionner les deux en même temps...

Voici mes deux pages principales (j'utilise django):
La première :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
60
61
62
< html>
    <html lang="fr">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 
        <link href="{% static "aventures\aventures.css" %}" type="text/css" rel="stylesheet">
 
        <title>{% block title %}{{aventure.titre}}: {{chapitre.titre}}{% endblock %}</title>
        {% block head %}{% endblock %}
 
    </head>
 
    <body>
 
        <header>
            <div class="collapse bg-primary" id="navbarHeader">
            <div class="container">
                <div class="row">
                <div class="col-sm-8 col-md-7 py-4">
                    <h4 class="text-white">About</h4>
                    <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
                </div>
                <div class="col-sm-4 offset-md-1 py-4">
                    <a class="btn btn-warning" href="{% url 'accueil' %}">Quitter et revenir à l'accueil</a>
                </div>
                </div>
            </div>
            </div>
            <div class="navbar navbar-dark float-right">
            <div class="container-fluid d-flex">
                <button class="navbar-toggler bg-primary" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            </div>
        </header>
    {% block jumbotron %}
        <!-- JUMBOTRON -->
        <div class="jumbotron text-center">
            <h1 class="display-4">{{chapitre.titre}}</h1>
            <p class="lead">{{chapitre.resume}}</p>
        </div>
    {% endblock %}
 
    {% block main %}
    {% endblock %}
    <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="{% static 'jquery-3.5.1.min.js' %}"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 
    {% block script %}
    {% endblock %}
    </body>
    </html>

La seconde dans le block main:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
    {% extends "base_aventures.html" %}
    {% load my_filter %}
    {% load static %}
    {% block main %}
    <!--pour passer la variable a javascript-->
    <input id=longueur_templates class="hidden" value={{templates|length}}>
 
    <!--Caroussel-->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false">
 
    {% if len_templates > 1 %}
        <div class="btn-group" role="group" aria-label="Basic example">
            {% for template in templates %}
                <button type="button" class="btn btn-warning chapitre d-block" href="#carouselExampleIndicators" data-slide-to="{{ forloop.counter0 }}">{{template.nom}}</button>
            {% endfor %}
        </div>
    {% endif %}
 
        <div class="carousel-inner">
    {% for template in templates %}
 
        {% if template.nom == 'Journal' %}    {% include './journal.html' %}    {% endif %}
 
        {% if template.nom == 'Énigme' %}
        <div class="carousel-item">    
            <p>Coucou Énigme</p>
        </div>    
        {% endif %}
 
 
        {% if template.nom == 'Choix' %}    {% include './choix.html' %}    {% endif %}
 
 
        {% if template.nom == 'Actions' %}    {% include './actions.html' %}    {% endif %}
 
        {% if template.nom == 'Question' %}
        <div class="carousel-item">
            <p>Coucou Question</p>
        </div>
        {% endif %}
 
 
    {% endfor %}
        </div>      
    </div>   
 
 
    {% endblock %}
 
    {% block script %}
 
    <script type="text/javascript" src="{% static 'aventures/js/chapitre.js' %}"></script>
 
    {% endblock %}

J'ai essayer de les placer dans différentes positions sans succès :
- si j’enlève le lien jquery, mon script ne fonctionne plus.
- si j’enlève le lien bootstrap, mes collapse ne fonctionnent plus correctement.
- si je laisse les deux, seul le premier fonctionne.

Il me semble qu'en théorie seul l'un des deux devrait suffire...
J'ai essayé avec jquery no.conflict(), mais soit j'ai tout fait de travers (ce qui est possible), soit ça ne fonctionne pas non plus.

Quelqu'un aurait-il une idée ?

Merci

**SpaceFrog** · 07/07/2020, 17h08

Jette un œil sur jQuery.noConflict()

**Niko21** · 07/07/2020, 21h15

Merci pour ton aide

J'ai essayé avec no.conflict(), mais sans succès.
Pour donner quelques détails:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="{% static 'jquery-3.5.1.min.js' %}" ></script>

--> Bootstrap fonctionne mais pas mon AJAX (Uncaught TypeError: $.ajaxSetup is not a function <anonymous> http://127.0.0.1:8000/static/aventur...chapitre.js:24), donc seul le premier script est pris en compte.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<script src="{% static 'jquery-3.5.1.min.js' %}" ></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

--> Mon script perso fonctionne, mais plus Bootstrap (du moins pas correctement, les collapses n'ont plus l'animation pour rentrer et le second click sur le bouton ne toggle pas)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

Uncaught TypeError: jQuery is undefined
getCookie http://127.0.0.1:8000/static/aventures/js/chapitre.js:9
<anonymous> http://127.0.0.1:8000/static/aventures/js/chapitre.js:19

Donc seulement boostrap qui fonctionne.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="{% static 'jquery-3.5.1.min.js' %}" ></script>

--> script perso ok, mais pas bootstrap.

J'ai fais quelques tests avec no.conflict(), mais j'avoue ne pas être sûr d'avoir bien compris.
J'ai lu ca:

If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="{% static 'jquery-3.5.1.min.js' %}" ></script>

+

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$.noConflict(true);

Au début de mon script perso.
--> Bootstrap fonctionne! Mais du coup plus mon jquery perso...

Uncaught TypeError: jQuery is undefined
getCookie http://127.0.0.1:8000/static/aventures/js/chapitre.js:9
<anonymous> http://127.0.0.1:8000/static/aventures/js/chapitre.js:19

Bref, ça fait des jours que je bloque là dessus, j'espère que ces quelques détails supplémentaire pourront aider

Merci à ceux qui prendront le temps de me lire

ps: Merci aussi pour la mise en forme du premier poste, la barre d'outil n'était pas disponible à partir de ma tablette.

**SpaceFrog** · 08/07/2020, 08h01

Essaye plutôt avec cette méthode:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var $M = jQuery.noConflict();
// Puis dans TON code remplace $ par $M
$M( "div p" ).hide();

**Niko21** · 08/07/2020, 14h06

Bonjour,

Malheureusement ça ne fonctionne pas non plus, la fonction $M.AJAX n'est pas reconnue, ce qui veut sans doute dire que c'est le lien bootstrap qui est pris en compte pour mon script (puisque slim ne reconnaît pas l'AJAX).

Mais je ne suis pas sûr que ce soit réellement un conflit entre les deux, puisqu'il s'agit d'une même librairie. Si je mets uniquement le lien jquery full version (que Bootstrap dit être supporté à la place du slim), mon script fonctionne et une bonne partie de Bootstrap... Mais pas les collapses qui ne se rétractent pas lors du second appui sur le bouton, et n'ont pas d'animation mais disparaissent directement.

Je ne comprends pas, je ne dois pas être le seul à utiliser jquery en parallèle de bootstrap... C'est forcément moi qui ai fait quelque chose de travers

Encore merci pour votre aide.

**NoSmoking** · 08/07/2020, 17h20

Bonjour,
peut-être devrais tu mettre une page en ligne pour que l'on puisse observer/analyser et pourquoi pas comprendre car en lisant j'ai du mal ...

**Niko21** · 08/07/2020, 22h26

Bonjour,

Je ne suis pas sûr de ce que tu entends par mettre une page en ligne. Pour l'instant je n'utilise que le serveur django et m'en contente pour développer mon projet.

Si ça peut aider, voici les deux pages ./journal.html et ./choix.html, difficilement lisibles je suppose avec les gabarits django.

journal.html:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 my_filter %}
 
<div class="carousel-item active">    
    <div class="journal-cadre texte text-justify centrer row">
        <div id="list-journal" class="list-group">
            {% for archives in list_archives %}
                {% if archives.0.genre  == 'chapitre' %}
                    <a class="list-group-item list-group-item-action chapitre" href="#chapitre-{{archives.0.chapitre.code}}">Chapitre n°{{archives.0.chapitre.code}}</a>
                {% else %}
                    <a class="list-group-item list-group-item-action tour" href="#tour-{{archives.0.numTour}}">Tour n°{{archives.0.numTour}}</a>
                {% endif %}
            {% endfor %}
        </div>
        <div class='journal-texte' data-spy="scroll" data-target="#list-journal" data-offset="100" class="scrollspy-example">
            {% for archives in list_archives %}
                {% if archives.0.genre == 'chapitre' %}
                <hr class='hr-tour'><h3 class="journal-h"id="chapitre-{{archives.0.chapitre.code}}">Chapitre n°{{archives.0.chapitre.code}}: {{archives.0.numTour.chapitre.titre}}</h3><hr class='hr-tour'><hr>
                {% else %}
                <hr class='hr-tour'><h4 class="journal-h"id="tour-{{archives.0.numTour}}">Tour n°{{archives.0.numTour}}</h4><hr class='hr-tour'><br>
                {% endif %}
 
                {% for archive in archives %}
                    {% if archive.genre == 'situation' %}
                        {% for texte_lie in archive.textes_lies.all %}
                        <p class="journal-texte-chapitre heros-concernes"><strong><em>{{texte_lie.heros.all|lister|capfirst}}.</em></strong></p>
                        <p class="journal-texte-chapitre">{% if texte_lie.heros.all|length > 1 %}{{texte_lie.texte.pluriel|linebreaksbr}}{% else %}{{texte_lie.texte.singulier|linebreaksbr}}{% endif %}</p>
                        {% endfor %}
                    {% elif archive.genre == 'chapitre' %}
                        {% for texte_lie in archive.textes_lies.all %}
                        <span class="journal-texte-chapitre">{% if texte_lie.heros.all|length > 1 %}{{texte_lie.texte.pluriel|linebreaksbr}}{% else %}{{texte_lie.texte.singulier|linebreaksbr}}{% endif %}</span>
                        {% endfor %}
                    {% endif %}
                {% endfor %}
                {% if archives.0.genre != 'chapitre' %}
                    <button class="btn btn-primary btn-collapse-details" type="button" data-toggle="collapse" disabled data-target="#collapse-details-{{forloop.counter0}}" aria-expanded="false" aria-controls="collapse-details-{{forloop.counter0}}">
                        + 
                    </button>
                    <div class="collapse" id="collapse-details-{{forloop.counter0}}">
                        <div class="card card-body texte-collapse">
                        {% for archive in archives %}
                            {% if archive.genre == 'resultat' %}
                                <p class='journal-heros'><strong>{% if archive.aide.all and archive.scoreHeros > 500 or archive.aide.all and archive.scoreHeros < -500  %}{{archive.heros|concat_heros_aide:archive.aide.all|lister|capfirst}}</strong> souhaitent {% else %}{{archive.heros|capfirst}}</strong> souhaite {% endif %}{{archive.action.nom_vue|lower}}{% if archive.heros.nom != archive.interaction.nom %} {{archive.interaction.nom}}{% endif %}{{archive.decision|lower}}{% if archive.aide.all and archive.scoreHeros < 500 and archive.scoreHeros > -500 %} avec l'aide de {{archive.aide.all|lister}}{% endif %}.</p>
                                {% for texte_lie in archive.textes_lies.all %}
                                    <span class="journal-texte-tour">{% if texte_lie.heros.all|length > 1 %}{{texte_lie.texte.pluriel|linebreaksbr}}{% else %}{{texte_lie.texte.singulier|linebreaksbr}}{% endif %}</span>
                                {% endfor %}
                            {% endif %}
                        {% endfor %}
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
 
 
    {% if len_templates == 1 %}
        <a href="{% url 'resultat_action' aventure_id chapitre.titre participants session.nomGroupe numTour %}" class="btn_complet btn btn-warning centrer">Étape suivante</a>
    {% endif %}
</div>

choix.html:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
{% load static %}
{% load my_filter %}
 
<div class="carousel-item">
    <div class="cadre_large">
        <div class="question consignes">
            <p class='margin-auto'>{% if list_heros|length > 1 or list_heros.0 == 'Les aventuriers' %}{{situation.question_pluriel}}{% else %}{{situation.question_singulier}}{% endif %}</p>
        </div>
        <div class='cadre-global-choix'>
            <div class="tableau">
                {% for heros in list_heros %}
                    <div class="heros-choix consignes">
                        <p class='margin-auto'>{{heros}}</p>
                        <div>
                            <img class="images_etats" src="{% static 'aventures/energie_icone.png' %}" alt="un éclair"> 
                            <span class='icones_etats' style="font-size: 15px; font-weight: 400; margin-bottom: 0; color:indigo;">{% if heros != 'Les aventuriers' %}{{pts_nrj|get_obj_attr:heros}}{% endif %}</span>
                            <img class="images_etats" src="{% static 'aventures/volonte_icone.png' %}" alt="un éclair">
                            <span class='icones_etats' style="font-size: 15px; font-weight: 400; margin-bottom: 0; color:indigo;">12</span>
                            <img class="images_etats" src="{% static 'aventures/humeur_icone.png' %}" alt="un éclair">
                        </div>                        
                    </div>
                    <div class="btn-heros">
                        <button class='margin-auto btn btn-warning btn-lg' type="button" data-toggle="collapse" data-target="#collapse_{{heros|replace_tiret:' '}}" aria-expanded="false" aria-controls="collapse_{{heros|replace_tiret:' '}}">Fais ton choix ici</button>
                    </div>
                    <hr>
                {% endfor %}
            </div>
            <div class="cadre-img-choix">
                <img class='img-choix' src="{% static 'aventures/chateau-dragon.jpg' %}" alt="Paysage fantastique avec un château et un dragon.">
                <form method="POST" action="{% url 'resultat_choix' aventure_id chapitre.titre participants session.nomGroupe numTour code code_situation_old %}">
                    {% csrf_token %}
                    {% for heros in list_heros %}
                    <input id="choix-{{heros|replace_tiret:' '}}" type="text" name="choix-{{heros|replace_tiret:' '}}" value="" hidden>
                    {% endfor %}
                    <input id="list_heros" type="text" name="list_heros" value="{{list_heros|join:'//'}}" hidden>
                    <button class='btn btn-warning btn-lg btn-validation-choix' type=submit hidden>Valider</button>
                </form>
            </div>
            {% for heros in list_heros %}
            <div class="collapse" id="collapse_{{heros|replace_tiret:' '}}" style='width: 49%;'>
                <div class='card card-body cadre-choix-2'>
                    <div class="cadre-choix">
                        {% for choix in list_choix %}
                            <button class='btn btn-primary btn-lg btn-choix'>{{choix.choix}}</button>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

Ces deux fichiers se retrouve sur une même page avec un système de carousel Bootstrap (qui lui fonctionne bien dans tous les cas).
Quand le script Bootstrap fonctionne, le collapse de journal.html fonctionne.
Dans le cas contraire, c'est mon script qui fonctionne pour choix.html.

J'ai appris en autodidacte en fonction de ce qui se trouvait sur mon chemin, du coup dès que je m'en éloigne j'ai de grosses lacunes, je m'excuse si je ne suis pas clair.

**NoSmoking** · 09/07/2020, 16h04

L'avantage d'une page en ligne, accessible via unr url et de n'importe quel endroit de la planète, est de voir le résultat généré ainsi que l'insertion des différents fichiers, en gros le contexte discussion de la page.

Par exemple cette ligne ...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="{% static 'jquery-3.5.1.min.js' %}"></script>

... me chiffonne, logiquement tu n'a pas besoin de ce script comme tu inclues jquery-3.5.1.slim.min.js.

**Niko21** · 09/07/2020, 21h46

Bonjour NoSmoking,

effectivement, je comprends ce que tu veux dire, mais je n'ai pas la possibilité pour l'instant de la mettre en ligne.

Pour le script, effectivement il est en double. Le problème c'est que si je ne le mets pas, je ne peux pas utiliser AJAX puisque le lien Bootstrap est la version slim.
Quand je ne mets que ce lien

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="{% static 'jquery-3.5.1.min.js' %}"></script>

, c'est Bootstrap qui fonctionne de travers.

Mais effectivement, que je mette les deux liens ou seulement le lien {% static 'jquery-3.5.1.min.js' %}, ça revient au même.

Ce qui m'interroge vraiment, c'est pourquoi Bootstrap ne fonctionne pas correctement en utilisant le lien vers la version full.

**NoSmoking** · 10/07/2020, 11h32

Ce qui m'interroge vraiment, c'est pourquoi Bootstrap ne fonctionne pas correctement en utilisant le lien vers la version full.

repart sur les bases « standard », sans le slim s tu as besoin d'Ajax.

Par contre

pourquoi Bootstrap ne fonctionne pas correctement

ne nous en dit pas bien long, qu'est ce qui plante/dysfonctionne, attendu que tu as de plus un script perso, message d'erreur post#3, dont nous ne savons rien.

**Niko21** · 10/07/2020, 13h48

Voici le script perso: (la partie concernée par mes deux templates affichés sont en bas: PAGE CHOIX et PAGE JOURNAL)

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
 
// NECESSAIRE POUR RECUPÉRER LE CSRF TOKEN DANS LA REQUETE AJAX
// using jQuery
function getCookie(name) {
  var cookieValue = null;
  if (document.cookie && document.cookie != '') {
      var cookies = document.cookie.split(';');
      for (var i = 0; i < cookies.length; i++) {
          var cookie = jQuery.trim(cookies[i]);
          // Does this cookie string begin with the name we want?
          if (cookie.substring(0, name.length + 1) == (name + '=')) {
              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
              break;
          }
      }
  }
  return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
  beforeSend: function(xhr, settings) {
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
          xhr.setRequestHeader("X-CSRFToken", csrftoken);
      }
  }
});
 
 
// GESTION DES INTERACTIONS EN FONCTION DU LIEU CHOISI: MAJ INTERACTION
$(function() {
  $(".choix_lieu").each(function(index){
    $(this).change(function () {
 
      //variables:
      var participants = $('#participants').val().split(', ')
      var data = {}
      data['heros'] = participants
      // On commence par désélectionner l'interaction du héros qui change de lieu, pour ne pas que les autres listes soient modifiées par une intéraction non valable, on reset la valeur alt et les actions liés.
      a = $(this).parent().next().find('option:selected').prop("selected", false)
      heros = $(this).parent().prev().find('input').attr('value')
      selecteur_last = 'input[selecteur="' + heros + '_last"]'
      $(selecteur_last).val('Soi-même')
      $(this).parent().next().find('.choix_interaction').trigger('change')
 
      // On définit les données à envoyer
      for (var hero of participants) {
 
        var lieu_selecteur = 'select[selecteur="select_lieu_' + hero + '"] option:selected'
        var choix_lieu = $(lieu_selecteur).val();
 
        select_list_interactions = 'input[selecteur="' + hero + '_interactions"'
        var list_interactions = $(select_list_interactions).val().split('*_*')
        if (list_interactions.length == 0) {
          list_interactions.push('Aucune')
        }
 
        var interactions_a_retirer = []
        var selecteur = 'option[selecteur="option_inter_' + hero + '"]'
        $('.interactions:selected').not(selecteur).each(function(){
          if (participants.indexOf($(this).val()) === -1) {
            interactions_a_retirer.push($(this).val())
          }
        })
 
        data[hero] = {
          'choix_lieu': choix_lieu,
          'list_interactions' : list_interactions,
          'interactions_a_retirer' : interactions_a_retirer,
        }
 
        data[hero] = JSON.stringify(data[hero])
      }
 
      $.ajax({
        url: '/aventures/maj_interactions/',
        type: 'post',
        data: data,
        dataType: 'json',
 
        success: function(data_r) {
 
          for (hero of participants) {
 
            var option = 'option[selecteur="option_inter_' + hero + '"]'
            $(option).each(function() {
              $(this).hide().removeAttr('disabled', 'True')
              if((data_r[hero]['interactions'].indexOf($(this).val()) != -1) && (data_r[hero]['interactions_a_retirer'].indexOf($(this).val()) === -1)) {
                $(this).show()
              } else if ((data_r[hero]['interactions'].indexOf($(this).val()) != -1) && (data_r[hero]['interactions_a_retirer'].indexOf($(this).val()) != -1)) {
                $(this).show().attr('disabled', 'True')
              }
            })
          }
        }
      });
    });
  });
});
 
 
 
// GESTION DES ACTIONS EN FONCTION DE L'INTERACTION CHOISIE: MAJ ACTIONS
$(function() {
  $('.choix_interaction').each(function(index) {
    $(this).on('change', function() {
      var choix_interaction = $(this).val();
      var session = $('#session').val();
      var chapitre_titre = $('#chapitre_titre').val();
      select_heros = '#heros' + index
      var heros = $(select_heros).val()
      var participants = $('#participants').val().split(', ')
      var numTour = $('#numTour').val()
      $('.choix_action').each(function(){
        $(this).trigger('change')
      })
 
      // Récupération de l'ancienne sélection:
      select_alt = 'input[selecteur="' + heros + '_last"]'
      var alt = $(select_alt).val()
 
      // Mise à jour de la valeur précédente d'interaction:
      $(select_alt).val(choix_interaction)
 
      select_option = 'option[selecteur!="option_inter_' + heros + '"]'
      $(select_option).each(function(){
        choix = choix_interaction
        for (hero of participants) {
          if (hero === choix_interaction) {
            choix = ''
          }
        }
        if (($(this).val() === choix) && ($(this).val() != 'Soi-même') && (participants.indexOf($(this).val()) === -1 )) {
          $(this).attr('disabled', 'True')
        } else if ($(this).val()=== alt) {
          $(this).removeAttr('disabled', 'True')
        }
      })
 
      $.ajax({
        url: '/aventures/maj_actions/',
        data: {
          'choix_interaction': choix_interaction,
          'heros' : heros,
          'session' : session,
          'chapitre_titre' : chapitre_titre,
          'numTour' : numTour,
        },
        dataType: 'json',
        success: function(data) {
 
          option = 'option[selecteur="option_act_' + data.heros + '"]'
          option2 = 'option[selecteur="option_act_' + data.heros + '"][value="attendre"]'
          $(option2).prop('selected', true);
          $(option).not('option[value="attendre"]').hide()
          data.actions_nom.sort()
          data.actions_nom_vue.sort()
          for (nom of data.actions_nom) {
            sel = '[value="' + nom + '"]'
            $(sel).show()
          }
 
        }
      });
    }).change();
  });
});
 
 
// Gestion du nombre max d'action sur une interaction.
$(function() {
  $('.choix_action').each(function() {
    $(this).on('change', function() {
      var participants = $('#participants').val().split(', ')
      var data = {}
      var hero = $(this).parent().parent().parent().find('input').val()
      console.log(hero)
      var action = $(this).val()
 
 
 
      // Récupération de l'ancienne sélection et annulation du disabled:
      select_alt = 'input[selecteur="' + hero + '_last_action"]'
      var alt = $(select_alt).val()
      select = 'option[value="' + alt + '"]'
      select2 = 'option[selecteur="option_act_' + hero + '"]'
      $(select).not(select2).each(function(){
        $(this).removeAttr('disabled', 'True')
      })
 
      // Mise à jour de la valeur précédente d'interaction:
      $(select_alt).val(action)
 
      data['participants'] = participants
      data['heros']  = hero
      console.log(data['heros'])
      for (heros of participants) {
        selecteur = '[selecteur="option_act_' + heros + '"]:selected'
        var couple = {}
        couple['interaction'] = $(selecteur).parent().parent().prev().find('option:selected').val()
        couple['action'] = $(selecteur).val()
        data[heros] = couple
 
        data[heros] = JSON.stringify(data[heros])
      }
 
      $.ajax({
        url: '/aventures/controle_actions/',
        type: 'post',
        data: data,
        dataType: 'json',
 
        success: function(data) {
 
          // Réponse si retrait est True
          if (data['retrait']) {
            selecteur = '[selecteur="option_inter_' + hero + '"]:selected'
 
            $('.interactions:selected').not(selecteur).each(function() {
              if ($(this).val() === $(selecteur).val()) {
                select = 'option[value="' + action + '"]'
                elem = $(this).parent().parent().next().find(select)
                if (elem.is(':selected')){
                  //pass
                } else {
                  $(this).parent().parent().next().find(select).attr('disabled', 'True')
                }
              } 
            })
          // Réponse si reset est True:
          } else if (data['reset']) { 
            $('.interactions:selected').not(selecteur).each(function() {
              option_selected = $(this).parent().parent().next().find('option:selected').val()
              if (($(this).val() === hero) && (option_selected === 'aider')) {
                $(this).prop("selected", false)
                $(this).parent().find('option[valeur="Soi-même"]').prop("selected", true)
                $(this).trigger('change')
              }
            })
          // Si le nombre d'aide est en dessous du nbre_max, il faut enlever les disabled potentiels:
          } else {
            $('option[value="aider"]').each(function() {
              $(this).prop("disabled", true).removeAttr("disabled")
            })
          }
 
 
        }
      })
    })
  })
})
 
 
// PAGE CHOIX
$(function() {
  // Pour changer la valeur du bouton en fonction du choix:
  $('.btn-choix').each(function() {
    $(this).on('click', function() {
      choix = $(this).text()
      selecteur_btn_heros = '[data-target="#' + $(this).parent().parent().parent().attr('id') + '"]'
      $(selecteur_btn_heros).text(choix.substring(0,15) + '...')
 
      // On change la valeur du input correspondant:
      id_heros = $(this).parent().parent().parent().attr('id')
      selecteur_input = 'input[id="choix-' + id_heros.substr(9,) + '"]'
      $(selecteur_input).val(choix)
 
      // Pour faire apparaitre le bouton Valider:
      var compteur = 0
      var count = 0
      $('.btn-heros button').each(function() {
        count += 1
        if ($(this).text() != 'Fais ton choix ici') {
          compteur +=1
        }
      })
      if (compteur === count) {
        $('.btn-validation-choix').removeAttr("hidden")
      }
    })
  })
 
 
 
  // Pour refermer le collapse:
  $('html, body').on('click', function (e) {
    if ($(e.target).hasClass('cadre-choix')) {
    } else if ($(e.target).hasClass('.btn-heros')) {
    } else {
        $('.collapse').removeClass('show')
    }
 
})
})
 
// PAGE JOURNAL:
$(function() {
  // Pour enlever le disabled du collapse s'il y a du contenu:
  $('div .card-body').each(function() {
    if ( $(this).children().length > 0 ) {
      $(this).parent().prev().removeAttr("disabled")
    }
  })
})

Avec uniquement le lien bootstrap, j'obtiens l'erreur :

Uncaught TypeError: $.ajaxSetup is not a function
<anonymous> http://127.0.0.1:8000/static/aventures/js/chapitre.js:24

L'erreur pointe la ligne 24 de mon script. Dans ce cas, le collapse bootstrap fonctionne correctement, mais pas mon script.

J'ai essayé de mettre en commentaire dans mon script tout ce qui ne concerne pas les deux pages JOURNAL et CHOIX (donc j'enlève les parties AJAX): dans ce cas la console n'indique plus d'erreur, mon script fonctionne, mais c'est mon collapse qui ne fonctionne plus.

J'espère que ces quelques détails supplémentaire pourront aider.

Merci pour votre patience.

**NoSmoking** · 10/07/2020, 18h16

Il te faut donc bien jQuery complet pour que tes script soient pris en compte.

mon script fonctionne, mais c'est mon collapse qui ne fonctionne plus.

Le problème est que l'on a une page vide de sens, pas de données ta page étant dynamique, donc pas moyen de faire un quelconque test.
Il nous faudrait donc une page avec un minimum de contenu pour voir le collapse qui ne fonctionne pas car là comme cela !!!!

**Niko21** · 10/07/2020, 21h20

Voici le code source de la page, peut-être que ça peut vous aider à y voir plus clair?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 
    <link href="/static/aventures/aventures.css" type="text/css" rel="stylesheet">
 
    <title>: Qui est Qiérus Vindell?</title>
 
 
</head>
 
<body>
 
    <header>
        <div class="collapse bg-primary" id="navbarHeader">
        <div class="container">
            <div class="row">
            <div class="col-sm-8 col-md-7 py-4">
                <h4 class="text-white">About</h4>
                <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
            </div>
            <div class="col-sm-4 offset-md-1 py-4">
                <a class="btn btn-warning" href="/">Quitter et revenir à l'accueil</a>
            </div>
            </div>
        </div>
        </div>
        <div class="navbar navbar-dark float-right">
        <div class="container-fluid d-flex">
            <button class="navbar-toggler bg-primary" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        </div>
    </header>
 
    <!-- JUMBOTRON -->
    <div class="jumbotron text-center">
        <h1 class="display-4">Qui est Qiérus Vindell?</h1>
        <p class="lead">Quiérus est un drôle de personnage rencontré à l&#x27;arrivée à l&#x27;école. Une chose est sûre, il cache quelque chose...</p>
    </div>
 
 
 
<!--pour passer la variable a javascript-->
<input id=longueur_templates class="hidden" value=2>
 
<!--Caroussel-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="btn-group" role="group" aria-label="Basic example">
 
            <button type="button" class="btn btn-warning chapitre d-block" href="#carouselExampleIndicators" data-slide-to="0">Journal</button>
 
            <button type="button" class="btn btn-warning chapitre d-block" href="#carouselExampleIndicators" data-slide-to="1">Choix</button>
 
    </div>
 
 
    <div class="carousel-inner">
 
 
 
 
<div class="carousel-item active">    
    <div class="journal-cadre texte text-justify centrer row">
        <div id="list-journal" class="list-group">
 
 
                    <a class="list-group-item list-group-item-action tour" href="#tour-2">Tour n°2</a>
 
                    <a class="list-group-item list-group-item-action tour" href="#tour-1">Tour n°1</a>
 
                    <a class="list-group-item list-group-item-action chapitre" href="#chapitre-2">Chapitre n°2</a>
 
                    <a class="list-group-item list-group-item-action chapitre" href="#chapitre-1">Chapitre n°1</a>
 
        </div>
        <div class='journal-texte' data-spy="scroll" data-target="#list-journal" data-offset="100" class="scrollspy-example">
 
 
                <hr class='hr-tour'><h4 class="journal-h"id="tour-2">Tour n°2</h4><hr class='hr-tour'><br>
                        <p class="journal-texte-chapitre heros-concernes"><strong><em>Plantule et Pédoncule cérébral.</em></strong></p>
                        <p class="journal-texte-chapitre">La porte est dégondée, vous n&#x27;éprouvez aucune difficulté à vous y introduire. La vieille cabane sent le pourri, elle a déjà été visité et il ne semble pas qu&#x27;il puisse rester grand-chose dans ces débris. Elle semble encore plus fragile de l&#x27;intérieur que de l&#x27;extérieur, en bas se trouve de la vieille paille séchée, une échelle d&#x27;une solidité douteuse permet de monter à l&#x27;étage. d&#x27;en bas, vous ne parvenez pas à voir ce qui s&#x27;y trouve, mais une chose est sûre, le plancher est aussi pourri que le reste.</p>
 
                        <p class="journal-texte-chapitre heros-concernes"><strong><em>Trufiot.</em></strong></p>
                        <p class="journal-texte-chapitre">Tu n&#x27;es pas venu là par hasard, une carte des environs te serait d&#x27;une grande aide pour toi et tes amis. Reste à savoir si ce vieux grip-sou acceptera de t&#x27;aider.</p>
 
                    <button class="btn btn-primary btn-collapse-details" type="button" data-toggle="collapse" disabled data-target="#collapse-details-0" aria-expanded="false" aria-controls="collapse-details-0">
                        + 
                    </button>
                    <div class="collapse" id="collapse-details-0">
                        <div class="card card-body texte-collapse">
 
                        </div>
                    </div>
 
                <hr class='hr-tour'><h4 class="journal-h"id="tour-1">Tour n°1</h4><hr class='hr-tour'><br>
 
                        <p class="journal-texte-chapitre heros-concernes"><strong><em>Trufiot, Plantule et Pédoncule cérébral.</em></strong></p>
                        <p class="journal-texte-chapitre">Vous vous apprêtez à partir à l&#x27;aventure. Cette fois-ci est la bonne, vous êtes motivés et rien ni personne ne vous en empêchera. Cependant vous n&#x27;êtes pas encore prêt, avant de partir il vous reste un peu de temps pour mieux vous équiper.</p>
 
                    <button class="btn btn-primary btn-collapse-details" type="button" data-toggle="collapse" disabled data-target="#collapse-details-1" aria-expanded="false" aria-controls="collapse-details-1">
                        + 
                    </button>
                    <div class="collapse" id="collapse-details-1">
                        <div class="card card-body texte-collapse">
 
                                <p class='journal-heros'><strong>Pédoncule cérébral et Plantule</strong> souhaitent  se diriger vers la vieille cabane.</p>
 
                                    <span class="journal-texte-tour">Vous arrivez rapidement à la vieille cabane, qui est… très vieille. Le vent, pourtant relativement calme, semble pouvoir la faire s&#x27;effondrer à chaque instant.</span>
 
                                <p class='journal-heros'><strong>Trufiot</strong> souhaite  aller chez le vieux cartographe.</p>
 
                                    <span class="journal-texte-tour">Tu arrives proche de la maison du vieux cartographe, il dort sur un chaise longue devant chez lui et ronfle sans retenue.</span>
 
                        </div>
                    </div>
                <hr class='hr-tour'><h3 class="journal-h"id="chapitre-2">Chapitre n°2: </h3><hr class='hr-tour'><hr>
 
                        <span class="journal-texte-chapitre">Arrivés sur place, nous sommes accueillis par le nouveau directeur adjoint de l’école, Pemmy Flitwick, puis conduits dans la grande salle, décorée avec faste et majesté. Nous avons pris place sur des chaises disposées devant les tables de chaque maison et face à la table des professeurs. L’occasion, peut-être, de présenter physiquement chaque professeur aux personnages. Sur un tabouret, un vieux chapeau gît... La cérémonie se déroulera normalement, Nous sommes placés à table avec nos futurs compagnons de chambre, ce qui me permet de faire leur connaissance. Description des compagnons. Je suis surpris(e) de ne pas voir Quiérus de toute la soirée. (Test Esprit/Rumeur) D’ailleurs, personne ne semble avoir vu Quiérus non plus, ni dans le train, ni à la gare, ni dans l’école. Une fois le festin bien avancé, on nous enseigne le mot de passe permettant d’ouvrir la porte de nos appartements, ainsi, ceux qui le souhaitent, peuvent disposer de leurs chambres. Fatigué(e) par mon voyage, je décide de quitter les festivités avant le dessert, contrairement à mes camarades. Tous les appartements sont conçus de la même manière, une salle commune sert de lieu de vie principal à partager avec ses camarades, à partir de laquelle on accède aux différentes chambres. Les chambres sont petites et rustiques mais permettent de s’isoler quand on en a besoin.<br>Alors que j’entre dans la salle commune, je suis étonné(e) de voir qu’une chambre est déjà occupée. Je toque par curiosité pour y découvrir… Quiérus Vindell ! Il me dit qu’il a une lettre de dérogation pour la cérémonie et qu’il n’a pas souhaité y participer : « Ma famille a suffisamment d’or pour m’offrir certains passe-droits, alors j’en profite. » (Test Cœur/Bluff) Quelque chose me trouble, j’ai le sentiment qu’il n’est pas sincère. « Toute ma famille est passée par cette maison... Mes parents ont obtenu que j’y sois inscrit d’office. Avec un peu d’or, on peut acheter ce que l’on veut ».<br>Je le quitte là-dessus, lui souhaitant une bonne nuit et vais moi-même me coucher. Épuisé(e), je ne mets pas longtemps à dormir. La nuit se passe relativement bien, si ce n’est le grincement métallique de la porte d’entrée qui me réveille lors de l’arrivée de mes camarades, de retour de la grande salle. Il faudra fixer ça demain…<br>JOUR 2 – JOUR 3<br>Je me réveille en premier(e), l’avenir appartient à ceux qui se lèvent tôt paraît-il. Enfin, c’est ce que j’ai pensé en premier lieu. En arrivant dans la salle commune, je remarque que la porte de chambre de Quiérus est ouverte. Je m’annonce discrètement mais il n’est plus là… (Test Esprit/Perception) et plus surprenant encore, il n’y a aucune affaire dans ses placards. La chambre est entièrement vide. (Test Esprit/Logique) En observant le matelas de plus près, je remarque qu’il est parfaitement plat, il semble que Quiérus n’a pas dormi ici. (Test Esprit/Logique) Il serait sorti pendant la nuit ? Quelque chose cloche…<br>Mon étonnement va grandissant quand mes camarades rejoignent, au compte-goutte, la salle commune, et m’annoncent avoir pensé que cette chambre était surnuméraire, et que personne n’y dormirait.<br>Là je ne comprends plus. Est-ce que je perds la raison ?<br>Ce Quiérus me cache quelque chose. Il faut que je découvre sa véritable identité.</span>
 
                        <span class="journal-texte-chapitre">Vous savez que des fantômes rôdent régulièrement dans le château.</span>
 
                <hr class='hr-tour'><h3 class="journal-h"id="chapitre-1">Chapitre n°1: </h3><hr class='hr-tour'><hr>
 
                        <span class="journal-texte-chapitre">Jour 1<br>Les élèves de première année de tout le pays se rendent à l’école en train via le Poudlard Express, un train à vapeur enchanté qui part à onze heures précises le premier septembre de chaque année, de la voie 9 ¾.  Comme d’habitude, les quais sont bondés de sorciers accompagnant leurs enfants de tous âges jusqu’aux portes du train, de bagages encombrants, de familiers bruyants et remuants et de vapeur.  J’arrive juste à temps pour embarquer et me trouve un compartiment, le seul à être encore vide. Une fois le train mis en marche, un garçon à l’apparence mûre mais visiblement du même âge que moi viens frapper à la porte de mon compartiment. Le teint pâle, il parle de façon lente, en détachant bien les mots : « Il y a encore de la place ? » ... Inutile de mentir, ce n’est pas la place qui manque.<br>« Bonjour. Désolé de te déranger. Je viens de l’avant du train, mais il n’y a plus de place libre. Je m’appelle Quiérus Vindell. Et toi ? » <br>Quiérus a revêtu sa robe de sorcier, mais il a pris soin de ne pas afficher les couleurs de son école. Il en sait visiblement beaucoup. Comme je suis assez curieux(se) de savoir ce qui m’attend, je lui pose de nombreuses questions auxquelles il répond patiemment. Je lui demande comment il sait tout ça et il me répond qu’il est le dernier d’une longue liste à venir à Poudlard pour y admirer ses merveilles, et que c’est comme s’il y était déjà allé. <br>Au bout d’un moment, il me demande si j’ai des Gallions d’or avec moi et si je suis issu(e) d’une famille riche. À ma réponse, il ne feint aucune réaction négative ou positive. Il m’avoue être issu d’une famille riche, et aussi avoir trouvé une façon bien agréable de dépenser son or. (Test Esprit/Perception) Je sens que Quiérus est mal à l’aise, mais ne sais pas pourquoi. Il refuse d’en dire davantage sur ce sujet, disant que c’est peut-être le stress de la rentrée. Dans la cohue de l’arrivée en gare de Poudlard, je perds Quiérus de vue. Je me dirige alors, accompagné(e) d’autres apprentis sorciers, en direction de l’école.</span>
 
        </div>
    </div>
 
</div>  
 
 
<div class="carousel-item">
    <div class="cadre_large">
        <div class="question consignes">
            <p class='margin-auto'>Où souhaitez-vous aller?</p>
        </div>
        <div class='cadre-global-choix'>
            <div class="tableau">
 
                    <div class="heros-choix consignes">
                        <p class='margin-auto'>Pédoncule cérébral</p>
                        <div>
                            <img class="images_etats" src="/static/aventures/energie_icone.png" alt="un éclair"> 
                            <span class='icones_etats' style="font-size: 15px; font-weight: 400; margin-bottom: 0; color:indigo;">4</span>
                            <img class="images_etats" src="/static/aventures/volonte_icone.png" alt="un éclair">
                            <span class='icones_etats' style="font-size: 15px; font-weight: 400; margin-bottom: 0; color:indigo;">12</span>
                            <img class="images_etats" src="/static/aventures/humeur_icone.png" alt="un éclair">
                        </div>                        
                    </div>
                    <div class="btn-heros">
                        <button class='margin-auto btn btn-warning btn-lg' type="button" data-toggle="collapse" data-target="#collapse_Pédoncule_cérébral" aria-expanded="false" aria-controls="collapse_Pédoncule_cérébral">Fais ton choix ici</button>
                    </div>
                    <hr>
 
                    <div class="heros-choix consignes">
                        <p class='margin-auto'>Plantule</p>
                        <div>
                            <img class="images_etats" src="/static/aventures/energie_icone.png" alt="un éclair"> 
                            <span class='icones_etats' style="font-size: 15px; font-weight: 400; margin-bottom: 0; color:indigo;">6</span>
                            <img class="images_etats" src="/static/aventures/volonte_icone.png" alt="un éclair">
                            <span class='icones_etats' style="font-size: 15px; font-weight: 400; margin-bottom: 0; color:indigo;">12</span>
                            <img class="images_etats" src="/static/aventures/humeur_icone.png" alt="un éclair">
                        </div>                        
                    </div>
                    <div class="btn-heros">
                        <button class='margin-auto btn btn-warning btn-lg' type="button" data-toggle="collapse" data-target="#collapse_Plantule" aria-expanded="false" aria-controls="collapse_Plantule">Fais ton choix ici</button>
                    </div>
                    <hr>
 
            </div>
            <div class="cadre-img-choix">
                <img class='img-choix' src="/static/aventures/chateau-dragon.jpg" alt="Paysage fantastique avec un château et un dragon.">
                <form method="POST" action="/aventures/1/Qui%20est%20Qi%C3%A9rus%20Vindell%3F/P%C3%A9doncule%20c%C3%A9r%C3%A9bral,%20Plantule,%20trufiot/fgffgd/resultat_choix/2/3.0/3.0,3.0,4.0/">
                    <input type="hidden" name="csrfmiddlewaretoken" value="4On5mbizbsQmvxMsxWfJxYvGNZQtWc9bGKRWX5rzU1gemGi5wlTgErgbn1BieAxQ">
 
                    <input id="choix-Pédoncule_cérébral" type="text" name="choix-Pédoncule_cérébral" value="" hidden>
 
                    <input id="choix-Plantule" type="text" name="choix-Plantule" value="" hidden>
 
                    <input id="list_heros" type="text" name="list_heros" value="Pédoncule cérébral//Plantule" hidden>
                    <button class='btn btn-warning btn-lg btn-validation-choix' type=submit hidden>Valider</button>
                </form>
            </div>
 
            <div class="collapse" id="collapse_Pédoncule_cérébral" style='width: 49%;'>
                <div class='card card-body cadre-choix-2'>
                    <div class="cadre-choix">
 
                            <button class='btn btn-primary btn-lg btn-choix'>Fouiller le rez-de-chaussée</button>
 
                            <button class='btn btn-primary btn-lg btn-choix'>Fouiller l&#x27;étage</button>
 
                            <button class='btn btn-primary btn-lg btn-choix'>Passer son chemin</button>
 
                    </div>
                </div>
            </div>
 
            <div class="collapse" id="collapse_Plantule" style='width: 49%;'>
                <div class='card card-body cadre-choix-2'>
                    <div class="cadre-choix">
 
                            <button class='btn btn-primary btn-lg btn-choix'>Fouiller le rez-de-chaussée</button>
 
                            <button class='btn btn-primary btn-lg btn-choix'>Fouiller l&#x27;étage</button>
 
                            <button class='btn btn-primary btn-lg btn-choix'>Passer son chemin</button>
 
                    </div>
                </div>
            </div>
 
        </div>
    </div>
</div>
    </div>      
</div>   
 
 
 
<!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="/static/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 
<script type="text/javascript" src="/static/aventures/js/chapitre.js"></script>
 
<link rel="stylesheet" href="/static/debug_toolbar/css/print.css" type="text/css" media="print">
<link rel="stylesheet" href="/static/debug_toolbar/css/toolbar.css" type="text/css">
<script src="/static/debug_toolbar/js/toolbar.js" defer></script>
<div id="djDebug" class="djdt-hidden" dir="ltr"
 
     data-store-id="2655d5e382db46ccbdb043d39fe080b5"
     data-render-panel-url="/__debug__/render_panel/"
 
     >
	<div class="djdt-hidden" id="djDebugToolbar">
		<ul id="djDebugPanelList">
 
			<li><a id="djHideToolBarButton" href="#" title="Masquer la barre d'outils">Masquer »</a></li>
 
 
				<li class="djDebugPanelButton">
					<input type="checkbox" data-cookie="djdtVersionsPanel" checked title="Désactiver pour les requêtes suivantes">
 
						<a href="#" title="Versions" class="VersionsPanel">
 
					Versions
 
 
						<br><small>Django 3.0.3</small>
 
 
 
						</a>
 
				</li>
 
				<li class="djDebugPanelButton">
					<input type="checkbox" data-cookie="djdtTimerPanel" checked title="Désactiver pour les requêtes suivantes">
 
						<div class="djdt-contentless">
 
					Temps
 
 
						<br><small>Total : 6092.52ms</small>
 
 
 
						</div>
 
				</li>
 
				<li class="djDebugPanelButton">
					<input type="checkbox" data-cookie="djdtSettingsPanel" checked title="Désactiver pour les requêtes suivantes">
 
						<a href="#" title="Paramètres de &lt;code&gt;site_django.settings&lt;/code&gt;" class="SettingsPanel">
 
					Paramètres
 
 
 
 
 
 
						</a>
 
				</li>
 
				<li class="djDebugPanelButton">
					<input type="checkbox" data-cookie="djdtHeadersPanel" checked title="Désactiver pour les requêtes suivantes">
 
						<a href="#" title="En-têtes" class="HeadersPanel">
 
					En-têtes
 
 
 
 
 
 
						</a>
 
				</li>
 
				<li class="djDebugPanelButton">
					<input type="checkbox" data-cookie="djdtRequestPanel" checked title="Désactiver pour les requêtes suivantes">
 
						<a href="#" title="Requête" class="RequestPanel">
 
					Requête
 
 
						<br><small>chapitre</small>
 
 
 
						</a>
 
				</li>
 
				<li class="djDebugPanelButton">
					<input type="checkbox" data-cookie="djdtSQLPanel" checked title="Désactiver pour les requêtes suivantes">
 
						<a href="#" title="SQL queries from 1 connection" class="SQLPanel">
 
					SQL
 
 
						<br><small>109 queries in 139.15ms</small>
 
 
 
						</a>
 
				</li>
 
				<li class="djDebugPanelButton">
					<input type="checkbox" data-cookie="djdtStaticFilesPanel" checked title="Désactiver pour les requêtes suivantes">
 
						<a href="#" title="Fichiers statiques (176 trouvé(s), 10 utilisé(s))" class="StaticFilesPanel">
 
					Fichiers statiques
 
 
						<br><small>10 fichiers utilisés</small>
 
 
 
						</a>
 
				</li>
 
				<li class="djDebugPanelButton">
					<input type="checkbox" data-cookie="djdtTemplatesPanel" checked title="Désactiver pour les requêtes suivantes">
 
						<a href="#" title="Gabarits (4 affichés)" class="TemplatesPanel">
 
					Gabarits
 
 
						<br><small>aventures/chapitre.html</small>
 
 
 
						</a>
 
				</li>
 
				<li class="djDebugPanelButton">
					<input type="checkbox" data-cookie="djdtCachePanel" checked title="Désactiver pour les requêtes suivantes">
 
						<a href="#" title="Appels au cache depuis 1 moteur" class="CachePanel">
 
					Cache
 
 
						<br><small>0 appel en 0.00ms</small>
 
 
 
						</a>
 
				</li>
 
				<li class="djDebugPanelButton">
					<input type="checkbox" data-cookie="djdtSignalsPanel" checked title="Désactiver pour les requêtes suivantes">
 
						<a href="#" title="Signaux" class="SignalsPanel">
 
					Signaux
 
 
						<br><small>10 receveurs de 12 signaux</small>
 
 
 
						</a>
 
				</li>
 
				<li class="djDebugPanelButton">
					<input type="checkbox" data-cookie="djdtLoggingPanel" checked title="Désactiver pour les requêtes suivantes">
 
						<a href="#" title="Messages du journal" class="LoggingPanel">
 
					Journaux
 
 
						<br><small>0 message</small>
 
 
 
						</a>
 
				</li>
 
				<li class="djDebugPanelButton">
					<input type="checkbox" data-cookie="djdtRedirectsPanel" title="Activer pour les requêtes suivantes">
 
						<div class="djdt-contentless djdt-disabled">
 
					Interception des redirections
 
 
						</div>
 
				</li>
 
				<li class="djDebugPanelButton">
					<input type="checkbox" data-cookie="djdtProfilingPanel" title="Activer pour les requêtes suivantes">
 
						<div class="djdt-contentless djdt-disabled">
 
					Profilage
 
 
						</div>
 
				</li>
 
		</ul>
	</div>
	<div class="djdt-hidden" id="djDebugToolbarHandle">
		<span title="Afficher la barre d'outils" id="djShowToolBarButton">«</span>
	</div>
 
 
			<div id="VersionsPanel" class="djdt-panelContent">
				<div class="djDebugPanelTitle">
					<a href="" class="djDebugClose"></a>
					<h3>Versions</h3>
				</div>
				<div class="djDebugPanelContent">
 
					<img src="/static/debug_toolbar/img/ajax-loader.gif" alt="loading" class="djdt-loader">
					<div class="djdt-scroll"></div>
 
				</div>
			</div>
 
 
 
 
 
			<div id="SettingsPanel" class="djdt-panelContent">
				<div class="djDebugPanelTitle">
					<a href="" class="djDebugClose"></a>
					<h3>Paramètres de <code>site_django.settings</code></h3>
				</div>
				<div class="djDebugPanelContent">
 
					<img src="/static/debug_toolbar/img/ajax-loader.gif" alt="loading" class="djdt-loader">
					<div class="djdt-scroll"></div>
 
				</div>
			</div>
 
 
 
			<div id="HeadersPanel" class="djdt-panelContent">
				<div class="djDebugPanelTitle">
					<a href="" class="djDebugClose"></a>
					<h3>En-têtes</h3>
				</div>
				<div class="djDebugPanelContent">
 
					<img src="/static/debug_toolbar/img/ajax-loader.gif" alt="loading" class="djdt-loader">
					<div class="djdt-scroll"></div>
 
				</div>
			</div>
 
 
 
			<div id="RequestPanel" class="djdt-panelContent">
				<div class="djDebugPanelTitle">
					<a href="" class="djDebugClose"></a>
					<h3>Requête</h3>
				</div>
				<div class="djDebugPanelContent">
 
					<img src="/static/debug_toolbar/img/ajax-loader.gif" alt="loading" class="djdt-loader">
					<div class="djdt-scroll"></div>
 
				</div>
			</div>
 
 
 
			<div id="SQLPanel" class="djdt-panelContent">
				<div class="djDebugPanelTitle">
					<a href="" class="djDebugClose"></a>
					<h3>SQL queries from 1 connection</h3>
				</div>
				<div class="djDebugPanelContent">
 
					<img src="/static/debug_toolbar/img/ajax-loader.gif" alt="loading" class="djdt-loader">
					<div class="djdt-scroll"></div>
 
				</div>
			</div>
 
 
 
			<div id="StaticFilesPanel" class="djdt-panelContent">
				<div class="djDebugPanelTitle">
					<a href="" class="djDebugClose"></a>
					<h3>Fichiers statiques (176 trouvé(s), 10 utilisé(s))</h3>
				</div>
				<div class="djDebugPanelContent">
 
					<img src="/static/debug_toolbar/img/ajax-loader.gif" alt="loading" class="djdt-loader">
					<div class="djdt-scroll"></div>
 
				</div>
			</div>
 
 
 
			<div id="TemplatesPanel" class="djdt-panelContent">
				<div class="djDebugPanelTitle">
					<a href="" class="djDebugClose"></a>
					<h3>Gabarits (4 affichés)</h3>
				</div>
				<div class="djDebugPanelContent">
 
					<img src="/static/debug_toolbar/img/ajax-loader.gif" alt="loading" class="djdt-loader">
					<div class="djdt-scroll"></div>
 
				</div>
			</div>
 
 
 
			<div id="CachePanel" class="djdt-panelContent">
				<div class="djDebugPanelTitle">
					<a href="" class="djDebugClose"></a>
					<h3>Appels au cache depuis 1 moteur</h3>
				</div>
				<div class="djDebugPanelContent">
 
					<img src="/static/debug_toolbar/img/ajax-loader.gif" alt="loading" class="djdt-loader">
					<div class="djdt-scroll"></div>
 
				</div>
			</div>
 
 
 
			<div id="SignalsPanel" class="djdt-panelContent">
				<div class="djDebugPanelTitle">
					<a href="" class="djDebugClose"></a>
					<h3>Signaux</h3>
				</div>
				<div class="djDebugPanelContent">
 
					<img src="/static/debug_toolbar/img/ajax-loader.gif" alt="loading" class="djdt-loader">
					<div class="djdt-scroll"></div>
 
				</div>
			</div>
 
 
 
			<div id="LoggingPanel" class="djdt-panelContent">
				<div class="djDebugPanelTitle">
					<a href="" class="djDebugClose"></a>
					<h3>Messages du journal</h3>
				</div>
				<div class="djDebugPanelContent">
 
					<img src="/static/debug_toolbar/img/ajax-loader.gif" alt="loading" class="djdt-loader">
					<div class="djdt-scroll"></div>
 
				</div>
			</div>
 
 
 
 
 
 
	<div id="djDebugWindow" class="djdt-panelContent"></div>
</div>
</body>
</html>

Dans cette configuration, mon script fonctionne, mais pas les collapses.

**NoSmoking** · 11/07/2020, 10h07

Voilà qui permet effectivement de mieux voir où se situe le soucis même si j'ai eu un peu de mal à le visualiser mais bon !

L'utilisation de jQuery slim fait planter ton script chapitre.js et c'est pour cela que cela fonctionne

En effet tu as un bout de code qui est incompatible avec le « toogle-collapse » de BootStrap.

Cela se passe dans cette partie du code de chapitre.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// Pour refermer le collapse:
$('html, body').on('click', function (e) {
  if ($(e.target).hasClass('cadre-choix')) {}
  else if ($(e.target).hasClass('.btn-heros')) {}
  else {
    $('.collapse').removeClass('show')
  }
})

Lorsque tu cliques sur un bouton l'événement se propage à la page et annule la mise en place de la classe show sur l'élément affiché via le removeClass, donc n'ayant plus la classe show il en devient non « refermable ».

Tu peux virer simplement ce bout de code, mais à toi de voir ce dont tu as vraiment besoin.

**Niko21** · 11/07/2020, 14h06

Un très grand merci pour votre aide et votre patience!

Effectivement ça fonctionne, je me rappelle avoir mis ce removeClass('show') à la place du .collapse('hide') de Bootstrap qui ne fonctionnait pas.
Maintenant la méthode .collapse('hide') fonctionne, donc c'est parfait.

Conflit bootstrap et jquery

jQuery

Discussions similaires

Partager

Partager