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 :

Afficher les textes ON ou OFF à chaque clic du checkbox


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre très actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2013
    Messages
    453
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : Octobre 2013
    Messages : 453
    Par défaut Afficher les textes ON ou OFF à chaque clic du checkbox
    Bonjour.

    L'idée pour moi est d'ajouter une fonctionnalité d'activation et de désactivation en PHP et Ajax plus tard. Mais pour le moment, je suis confronté à une erreur d'affichage de texte on et off au niveau de l'activations des cartes carte Visa et Mastercard dont le Code HTML est le suivant:

    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
    <div class="col-lg-3 mb-lg-0 mb-3">
    				<div class="card p-3">
    					<div class="row">
    						<div class="col-8">
    							<div class="img-box"><img src="cardimg/visa.png" alt=""></div>
    							<div class="number"><label class="fw-bold" for="">**** **** **** 1060</label></div>
    						</div>
    						<div class="col-4">
    							<form method="post" class="toggleForm">
    								<div class="custom-control custom-switch">
    									<input type="checkbox" class="custom-control-input" id="customSwitch1" name='machine_state'>
    									<label class="custom-control-label" id="statusText1" for="customSwitch1"></label>
    								</div>
    							</form>
    						</div>
    					</div>
     
    					<div class="row">
    							<small class="col-9">
    								<span class="fw-bold">Expiry date:</span>
    							</small>
    							<small class="col-3">
    								<span>10/16</span>
    							</small>
    					</div>
    				</div>
    			</div>
    			<div class="col-lg-3 mb-lg-0 mb-3">
    				<div class="card p-3">
    					<div class="row">
    						<div class="col-8">
    							<div class="img-box"><img src="cardimg/mastercard.png" alt=""></div>
    							<div class="number"><label class="fw-bold" for="">**** **** **** 1060</label></div>
    						</div>
    						<div class="col-4">
    							<form method="post" class="toggleForm">
    								<div class="custom-control custom-switch">
    									<input type="checkbox" class="custom-control-input" id="customSwitch2" name='machine_state'>
    									<label class="custom-control-label" id="statusText2" for="customSwitch2"></label>
    								</div>
    							</form>
    						</div>
    					</div>
     
    					<div class="row">
    							<small class="col-9">
    								<span class="fw-bold">Expiry date:</span>
    							</small>
    							<small class="col-3">
    								<span>10/16</span>
    							</small>
    					</div>
    				</div>
    			</div>

    Et un 1er Code JS des ids customSwitch1 et statusText1:

    Code : 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
    function putStatus() {
        $.ajax({
            type: "GET",
            url: "https://api.srv3r.com/toggle/",
            data: {toggle_select: true},
            success: function (result) {
                if (result == 1) {
                    $('#customSwitch1').prop('checked', true);
                    statusText1(1);
                } else {
                    $('#customSwitch1').prop('checked', false);
                    statusText1(0);
                }
            }
        });
    }
     
    function statusText1(status_val) {
        if (status_val == 1) {
            var status_str = "On";
        } else {
            var status_str = "Off";
        }
        document.getElementById("statusText1").innerText = status_str;
    }
     
    function onToggle() {
        $('#toggleForm :checkbox').change(function () {
            if (this.checked) {
                //alert('checked');
                updateStatus(1);
                statusText1(1);
            } else {
                //alert('NOT checked');
                updateStatus(0);
                statusText1(0);
            }
        });
    }
     
    function updateStatus(status_val) {
        $.ajax({
            type: "POST",
            url: "https://api.srv3r.com/toggle/",
            data: {toggle_update: true, status: status_val},
            success: function (result) {
                console.log(result);
            }
        });
    }
     
    $(document).ready(function () {
        putStatus();//Set button to current status
        onToggle();//Update when toggled
        statusText1();//Last updated text
    });
    Et le second Code JavaScript des ids customSwitch2 et statusText2:

    Code : 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
    function putStatus() {
        $.ajax({
            type: "GET",
            url: "https://api.srv3r.com/toggle/",
            data: {toggle_select: true},
            success: function (result) {
                if (result == 1) {
                    $('#customSwitch2').prop('checked', true);
                    statusText2(1);
                } else {
                    $('#customSwitch2').prop('checked', false);
                    statusText2(0);
                }
            }
        });
    }
     
    function statusText2(status_val) {
        if (status_val == 1) {
            var status_str = "On";
        } else {
            var status_str = "Off";
        }
        document.getElementById("statusText2").innerText = status_str;
    }
     
    function onToggle() {
        $('#toggleForm :checkbox').change(function () {
            if (this.checked) {
                //alert('checked');
                updateStatus(1);
                statusText2(1);
            } else {
                //alert('NOT checked');
                updateStatus(0);
                statusText2(0);
            }
        });
    }
     
    function updateStatus(status_val) {
        $.ajax({
            type: "POST",
            url: "https://api.srv3r.com/toggle/",
            data: {toggle_update: true, status: status_val},
            success: function (result) {
                console.log(result);
            }
        });
    }
     
    $(document).ready(function () {
        putStatus();//Set button to current status
        onToggle();//Update when toggled
        statusText2();//Last updated text
    });
    Le problème c'est que quand je clique sur le bouton Checkbox, au niveau de la page HTML, je devais en principe avoir un effet toggle qui change de on à off à chaque clique.

    Mais le souci est que les statusText1 et statusText2 réprésentant les textes on et off demeurent statiques au lieu de changer à chaque fois qu'on clique sur le bouton checkbox.

    Aidez-moi donc à corriger mon Code JavaScript ci-dessus de sorte à réussir le changer de texte de on à off à chaque fois que je clique.

    Aussi existe t-il un moyen pour synchroniser l'utilisation du Bouton Checkbox d'Activation et de Désactivation des différents Ids au lieu de les faire séparément dans deux différents code qui sont qu'en même presque qu'indentique ??? Si oui, comment procéder ???

    Merci d'avance.

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 518
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 518
    Par défaut
    Bonjour,

    En tapant l'url "https://api.srv3r.com/toggle/?toggle_select=true" (soit avec true ou false), directement dans la barre d'adresse du navigateur, le résultat est toujours "0".

    Tu peux voir ce retour dans la console si tu utilises un console.log dans le callback success :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    success: function (result) {
    console.log("résultat est :",result);
    ....
    }
    Citation Envoyé par cheboy Voir le message
    Aussi existe t-il un moyen pour synchroniser l'utilisation du Bouton Checkbox d'Activation et de Désactivation des différents Ids au lieu de les faire séparément dans deux différents code qui sont qu'en même presque qu'indentique ??? Si oui, comment procéder ???
    Oui, tu peux les mettre tous les deux dans un seul sélecteur :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    $(".toggleForm :checkbox").on("change",function(){
    if($(this).attr('id')=="customSwitch1"){....}
    else if($(this).attr('id')=="customSwitch2"){....}
    });
    Et attention, le sélecteur #toggleForm :checkbox n'est pas correcte, puisque tu n'a aucun élément ayant id="toggleForm", mais plutôt ayant la classe .toggleForm

  3. #3
    Membre très actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2013
    Messages
    453
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : Octobre 2013
    Messages : 453
    Par défaut
    Merci pour la réponse. J'ai pu gérer avec ceci:

    Code : 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
    function putStatus(target) {
        $.ajax({
            type: "GET",
            url: "https://api.srv3r.com/toggle/",
            data: {toggle_select: true},
            success: function (result) {
                if (result == 1) {
                    $(target).prop('checked', true);
                } else {
                    $(target).prop('checked', false);
                }
            }
        });
    }
     
    function updateStatus(status_val) {
        $.ajax({
            type: "POST",
            url: "https://api.srv3r.com/toggle/",
            data: {toggle_update: true, status: status_val},
            success: function (result) {
                console.log(result);
            }
        });
    }
     
    $(document).ready(function () {
        // putStatus('#customSwitch1');
        // putStatus('#customSwitch2');
     
        $('.statuses').change(function () {
            if($(this).is(':checked')){
                updateStatus(1);
                $(this).next().text('On');
            }else{
                updateStatus(0);
                $(this).next().text('Off');
            }
        });
    });
    Merci encore.

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

Discussions similaires

  1. Réponses: 7
    Dernier message: 10/01/2020, 19h00
  2. Réponses: 4
    Dernier message: 30/03/2018, 17h19
  3. [XL-2007] Ajouter une ligne à mon code pour éliminer les doublons dans un Combobox
    Par INFINITY100 dans le forum Macros et VBA Excel
    Réponses: 1
    Dernier message: 13/01/2018, 02h39
  4. [MySQL] bug de mon code pour afficher des donnes BDD a partir de l'id transmise
    Par gael-abdelhadi dans le forum PHP & Base de données
    Réponses: 5
    Dernier message: 20/03/2011, 12h56

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