IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Conflit bootstrap et jquery


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Enseignant
    Inscrit en
    Octobre 2019
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2019
    Messages : 39
    Par défaut Conflit bootstrap et jquery
    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

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Jette un œil sur jQuery.noConflict()
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre averti
    Homme Profil pro
    Enseignant
    Inscrit en
    Octobre 2019
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2019
    Messages : 39
    Par défaut
    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>
    +
    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.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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();
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre averti
    Homme Profil pro
    Enseignant
    Inscrit en
    Octobre 2019
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2019
    Messages : 39
    Par défaut
    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.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    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 ...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 05/02/2015, 17h59
  2. Conflit lightbox2 et JQuery
    Par bulldo dans le forum jQuery
    Réponses: 2
    Dernier message: 30/08/2011, 14h25
  3. conflit entre 2 jquery
    Par lena5 dans le forum jQuery
    Réponses: 10
    Dernier message: 20/03/2011, 15h34
  4. Conflits entre script JQuery
    Par joker92 dans le forum jQuery
    Réponses: 7
    Dernier message: 29/11/2009, 20h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo