[A21] BootStrap 4 - Bouttons toggle (options flexibles)

Mes explications seront pour Bootstrap v4, mais le site de référence propose d'autres inclusions de script.
npm :

Code:

npm i bootstrap4-toggle --save

yarn :

Code:

yarn add bootstrap4-toggle

Il m'aura fallu beaucoup de temps pour démystifier les problèmes de déclenchement d'évènements sur le click ou le changement d'état des boutons toggle. Alors que je pensais avoir résolu le problème avec l'enseignant, le soir même c'est revenue.   Il semblerait que tout ce qui suit soit important, tel que vu dans la pages des "issues" du site de référence (/issues/174):


bouton de test, dans la page [ta page].ejs :

Code:

<input id="mytoggle" type="checkbox" checked data-toggle="toggle" data-onstyle="outline-primary" data-offstyle="outline-secondary">

Et en dessous dans les balises <scritp>, changer la détection d'évenement: (/issues/174#issuecomment-609008922) 

Code:

  $(function(){

            $('#mytoggle').on('change', function() {
                alert('Cette manière est plus probable de fonctionner')

                if($(this).prop('checked')){
                    alert('changing to auto')
                } else {
                    alert('changing to manual')
                }
            });

            $('#mytoggle').change(function() {
                alert("C'est censé fonctionner, mais parfois ca m'est arrivé que non")

                if($(this).prop('checked')){
                    alert('changing to auto')
                } else {
                    alert('changing to manual')
                }
            })

        })

(Si jamais vous avez encore des problèmes, ce que je doute, lisez les commentaires suivants dans l'"issue/174" qui semblent avoir fonctionné pour les autres.)

Mais surtout, cette dernière étape règle la plupart du temps le problème. pourquoi? Je ne saurais répondre... (/issues/174#issuecomment-323201838)
En bas completement du fichier ejs avant le script ci-dessus:

Code:

<footer>
<!--Fiou! il est capricieux ce toggle, il le faut drette ici, pas ailleurs!-->
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
<script>
    var socket = io.connect('http://localhost:3000')
</script>
</footer>

L'utilisation de footer n'est pas obligatoire, ni socket.io, qui sont des exemples de codes avoisinants pour vous aider à comprendre où c'est situé.

Maintentant vous avex accès à des toggles plein d'options! --> https://gitbrent.github.io/bootstrap4-toggle/ pour les trouver

[Hans]