<template> javascript bootstrap ne s'affiche pas correctement

Résolu/Fermé

chtioub - Modifié le 26 oct. 2020 à 19:56
chtioub - 27 oct. 2020 à 11:05

Bonjour,

J'ai créer le code ci-dessous car je ne comprends pas pourquoi le toggle button s'affiche comme une checkbox quand j'intègre le node depuis en template en javascript.

A l'ouverture, le toggle button s'affiche correctement
également sur un DOMContentLoaded event
Mais affiche un checkbox avec le meme code sur l'appuis du bouton "My Button"

<!doctype html>
<html lang="en">

<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css"
        rel="stylesheet">
</head>

<body>
    <div class="container">
        <div>
            <button type="button" class="btn btn-primary" id="myButton">My Button</button>
        </div>
        <div id="newButton">
            <div>
                <input type="checkbox" checked data-toggle="toggle" data-width="10" data-height="" data-on=" "
                    data-off=" " data-onstyle="primary" data-offstyle="warning">
            </div>
        </div>
    </div>

    <template id="newRow">
        <div>
            <input type="checkbox" checked data-toggle="toggle" data-width="10" data-height="" data-on=" " data-off=" "
                data-onstyle="primary" data-offstyle="warning"></td>
        </div>
    </template>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>


    <script>
        function insertNewRow(){
            var template = document.querySelector("#newRow");
            var tbody = document.querySelector("#newButton");

            var clone;
            var td;

            clone = document.importNode(template.content, true);
            tbody.appendChild(clone);
        }

        $('#myButton').on('click', insertNewRow)

        document.addEventListener('DOMContentLoaded', insertNewRow);

    </script>
</body>

</html>

A voir également:

<template> javascript bootstrap ne s'affiche pas correctement
Telecharger javascript - Télécharger - Langages
Le clavier de mon telephone ne s'affiche plus - Guide
Clémence souhaite faire calculer automatiquement les prix de 30 produits dans trois devises. elle a déjà saisi une formule de calcul pour le tarif du premier produit dans la première devise. corrigez sa formule afin que recopiée vers le bas puis vers la droite, elle remplisse correctement tout le tableau. - Forum Excel
Facebook n'affiche plus les anniversaires ✓ - Forum Facebook
Javascript round ✓ - Forum Javascript

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
26 oct. 2020 à 20:25

Bonjour,

Le JS du plugin button toggle doit finir de se charger après le document load..
Donc le premier se créé correctement...

Pour éviter cela, initialise le en Javascript

function insertNewRow(){
            var template = document.querySelector("#newRow");
            var tbody = document.querySelector("#newButton");

            var clone = document.importNode(template.content, true);
            clone.querySelector("input").classList.add('bntToggle');
            console.log("clone",clone);
            tbody.appendChild(clone);
            $('.bntToggle').bootstrapToggle();
        }

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
26 oct. 2020 à 20:26

Au passage, j'ai édité ton message pour ajouter le LANGAGE dans les balises de code.

Merci de le faire à l'avenir.
Explications à lire entièrement disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

.

Réponse 2 / 2

chtioub
27 oct. 2020 à 11:05

Parfait, j'ai compris, merci.

OK pour la balise LANGAGE. Je le ferais la prochaine fois.

Discussions similaires

programme qui n'affiche pas le mot secret

Mes smiley de s'affiches pas

impossible de voir les photos et videos sur une conversation messenger

Facebook ne signale pas mon anniversaire

probleme firefox la page n'est pas redirigée correctement

Discussions similaires

Newsletters