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 ...

Conflit bootstrap et jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager