Checkbox reste checked après fermeture popup

**jules_diedhiou** · 16/09/2014, 18h34

Je veux qu'un checkbox reste checker aprés insertion données dans une fenétre popup. Il y'a une fonction qui lorsqu'on ferme le popup le checkbox est déselectionner(annulation de l'insertion) voici le code jquery

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
 
 $(document).ready(function () {
                $( "#Form" ).dialog({
                    "autoOpen" : false,
                    "height" : 400,
                    "width" : 650,
                    "modal" : true,
                    "close" : function(){
                        $( '.checkbox' ).prop( 'checked', false );
                    }
                });
 
                $( '.checkbox' ).on( "click", function(){
                    if ( $( this ).is( ':checked' ) ){
                        var checked_value = $( this ).val();
                        $( "#txt_lala" ).text( checked_value );
                        $("#anomalie").val(checked_value);
                        $( "#Form" ).dialog( "open" );
                        $("#submit").click(function() {
                            var fait = $("#fait").val();
                            var anomalie = $("#anomalie").val();
                            var missionID = $("#missionID").val();
                            if (fait == '') {
                                alert("Champs commentaire Obligatoire...!!");
                            }else{
                                $.post("<?php echo $_SESSION['config']['businessappurl']?>index.php?display=true&module=Inspecteur&page=insertanomalie", {
                                    fait1: fait,
                                    anomalie1: anomalie,
                                    missionID1: missionID
                                }, function(data) {
                                    alert(data);
                                    $('#form')[0].reset(); // To reset form fields
                                    $( "#Form" ).dialog( 'close' );
                                });
                            }
 
 
                        });
 
                    } else {
                        $( "#Form" ).dialog( 'close' );
                    }
                });
            });

**danielhagnoul** · 16/09/2014, 19h43

Bonsoir

Il nous manque le contexte(HTML) pour comprendre le fonctionnement du code JS, mais il est certain que $( '.checkbox' ).prop( 'checked', false ); désélectionne les éléments du DOM ayant la classe "checkbox".

**jules_diedhiou** · 17/09/2014, 13h00

voici le code html

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
 
<?php
echo"<ul>";
            while($res3=$db3->fetch_object()){
                echo "<li><input type='checkbox' class='checkbox' id='checkbox' name='check'  value='".$res3->id."-".$res3->libelle."' />".$res3->libelle."</li>";
            }
 
 
            echo "</ul>";
?>
    <div id="Form" class="container" style="display: none; width: 750px; height: 500px;">
        <form method="get" id="form" >
            <span class='span' id=txt_lala></span>
 
            <fieldset>
                <label for="name">Commentaires ou Faits</label>
                <input type="hidden" name="anomalie" class="hide" id="anomalie" value="">
                <input type="hidden" name="missionID" class="hide" id="missionID" value="<?php echo $_SESSION['mission_id']?>">
                <input type="text" name="fait" id="fait" value="" class="text ui-widget-content ui-corner-all">
 
                <!-- Allow form submission with keyboard without duplicating the dialog button -->
                <input id="submit" type="button" value="Submit">
            </fieldset>
        </form>
 
 
 
 
    </div>

**jules_diedhiou** · 17/09/2014, 13h08

je veux que le bouton submit puisse fermer le popup sans décocher le checkbox mais si on annule c'est a dire en fermant le checkbox le popup se ferme en décochant le checkbox

**danielhagnoul** · 17/09/2014, 21h47

Bonsoir

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
while($res3=$db3->fetch_object()){
                echo "<li><input type='checkbox' class='checkbox' id='checkbox' name='check'  value='".$res3->id."-".$res3->libelle."' />".$res3->libelle."</li>";

Un ID doit être unique dans toute la page web !

~~je veux~~

[je souhaiterais ] que le bouton submit puisse fermer le popup sans décocher le checkbox mais si on annule c'est a dire en fermant le checkbox le popup se ferme en décochant le checkbox

L'architecture de votre code ne permet pas de résoudre le problème. Votre usage de UI Dialog n'est pas optimal.

J'ai construit un exemple de code qui fonctionne et qui, si j'ai bien compris, résout votre problème. Reste le traitement du changement d'avis de l'utilisateur, ce que j'ai fait dans mon exemple, l'empêcher de changer d'avis n'est pas une solution valable.

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
<ul>
    <li>
        <input type='checkbox' class="checkbox" value='125'>
        <input type='checkbox' class="checkbox" value='225'>
        <input type='checkbox' class="checkbox" value='325'>
        <input type='checkbox' class="checkbox" value='425'>
        <input type='checkbox' class="checkbox" value='525'>
        <input type='checkbox' class="checkbox" value='625'>
    </li>
</ul>
 
<div id="Form" style="display: none; width: 750px; height: 500px;">
    <form id="form">
        <span class='span' id=txt_lala></span>
        <fieldset>
            <label for="name">Commentaires ou Faits</label>
            <input type="hidden" name="anomalie" class="hide" id="anomalie" value="">
            <input type="hidden" name="missionID" class="hide" id="missionID" value="">
            <input type="text" name="fait" id="fait" value="" class="text ui-widget-content ui-corner-all">
        </fieldset>
    </form>
</div>

Code JS :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var jObjFormDiv = $( "#Form" ),
        jObjFormulaire = $( "#form" );
 
    jObjFormDiv.dialog({
        "autoOpen" : false,
        "height" : 400,
        "width" : 650,
        "modal" : true,
        "buttons" : {
            "Soumettre": function() {
 
                jObjFormulaire.trigger( "submit" )
 
            },
            "Annuler" : function(){
 
                $( jObjFormulaire.data( "checkbox" ) ).prop( "checked", false );
                jObjFormDiv.dialog( "close" );
 
            }
        }
    });
 
    $( '.checkbox' ).on( "click", function(){
 
        if ( $( this ).is( ':checked' ) ){
 
            // stocke l'élément input checkbox concerné
            jObjFormulaire.data( "checkbox", this );
 
            var checked_value = $( this ).val();
 
            $( "#txt_lala" ).text( checked_value );
            $( "#anomalie" ).val( checked_value );
 
            jObjFormDiv.dialog( "open" );
 
        } else {
 
            // Gestion du cas où l'utilisateur change d'avis !
 
        }
    });
 
    jObjFormulaire.on( "submit", function(){
 
        var fait = $( "#fait" ).val(),
            anomalie = $( "#anomalie" ).val(),
            missionID = $( "#missionID" ).val();
 
        if ( fait == '' ){
 
            alert( "Champs commentaire Obligatoire ! Soumission du formulaire annulée." );
 
            $( jObjFormulaire.data( "checkbox" ) ).prop( "checked", false );
            jObjFormDiv.dialog( "close" );
 
        } else {
 
            // code $.post(); impossible de tester
 
            this.reset(); // To reset form fields
 
            /*
             * Comme le changement d'avis de l'utilisateur n'est pas géré, 
             * on peut l'empêcher de changer d'avis, mais ce n'est pas une bonne solution.
             */
            $( jObjFormulaire.data( "checkbox" ) ).prop( "disabled", true );
 
 
            jObjFormDiv.dialog( "close" );
        }
 
        // Il faut bloquer la soumission traditionnelle 
        // du formulaire sinon la page est rechargée !
        return false; // important !
    });
 
});

**jules_diedhiou** · 18/09/2014, 13h18

bonjour
j'ai essayer votre script mais le submit ne marche pas

**danielhagnoul** · 18/09/2014, 19h30

J'ai testé cet exemple plusieurs fois hier, il fonctionne correctement.

Vous n'auriez pas oublié de remplacer ce commentaire par votre code ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

// code $.post(); impossible de tester

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$.post("<?php echo $_SESSION['config']['businessappurl']?>index.php?display=true&module=Inspecteur&page=insertanomalie", {
    fait1: fait,
    anomalie1: anomalie,
    missionID1: missionID
}, function(data) {
    alert(data);
    $('#form')[0].reset(); // To reset form fields
    $( "#Form" ).dialog( 'close' );
});

**jules_diedhiou** · 19/09/2014, 11h50

C'est bon mais je pense qu'il faudrait forcer la fermeture du popup par le bouton annuler si on ferme avec la croix du popup ça ne va pas se décocher

**danielhagnoul** · 19/09/2014, 13h08

En effet, il faut cacher le bouton de fermeture. Il suffit d'ajouter une classe CSS et d'utiliser l'option dialogClass :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.no-close .ui-dialog-titlebar-close {
  display: none;
}

Code JS :

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
    jObjFormDiv.dialog({
        "autoOpen" : false,
        "height" : 400,
        "width" : 650,
        "modal" : true,
        "dialogClass" : "no-close",
        "buttons" : {
            "Soumettre": function() {
 
                jObjFormulaire.trigger( "submit" )
 
            },
            "Annuler" : function(){
 
                $( jObjFormulaire.data( "checkbox" ) ).prop( "checked", false );
                jObjFormDiv.dialog( "close" );
 
            }
        }
    });

**jules_diedhiou** · 19/09/2014, 14h43

En effet pour ce qui est de l'option annulation je pense qu'il faut juste ajouter un else sur la condition qui coche le checkbox

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
if ( $( this ).is( ':checked' ) ){
//traitement
}else{
//traitement
}

ça vous semble une bonne solution?

Checkbox reste checked après fermeture popup

jQuery

Discussions similaires

Partager

Partager