<template> javascript bootstrap ne s'affiche pas correctement [Résolu]

Signaler
-
 chtioub -
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>

2 réponses

Messages postés
29895
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 octobre 2020
2 891
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();
        }

Messages postés
29895
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 octobre 2020
2 891
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

.
Parfait, j'ai compris, merci.

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