<template> javascript bootstrap ne s'affiche pas correctement

Résolu

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

Afficher la suite

A voir également:

<template> javascript bootstrap ne s'affiche pas correctement
Votre appareil ne dispose pas des correctifs de qualité et de sécurité importants - Guide
Le clavier de mon telephone ne s'affiche plus - Guide
Ma clé usb ne s'affiche pas - Guide
Telecharger javascript - Télécharger - Langages
Excel ne pas afficher #valeur ✓ - Forum Excel

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

Parfait, j'ai compris, merci.

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

Discussions similaires

java script error in the main process

Votre pc n'a pas démarré correctement

probleme d'affichage des images sous word

Impossible d'afficher numéro de diaporama

Javascript Arrondi à 2 chiffres après la virgule

Votre réponse

Discussions similaires