Checkbox reste checked après fermeture popup

Version imprimable

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:

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' );
                    }
                });
            });

16/09/2014, 19h43
danielhagnoul

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".

voici le code html

Code:

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>

17/09/2014, 13h08
jules_diedhiou

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

Bonsoir

Code:

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 !

Citation:

~~je veux~~ :aie: [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:

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:

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 !
    });
 
});

18/09/2014, 13h18
jules_diedhiou

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

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

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

Code:

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

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' ); });

19/09/2014, 11h50
jules_diedhiou

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

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

Code:

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

Code:

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" );
 
            }
        }
    });

19/09/2014, 14h43
jules_diedhiou
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:

1 2 3 4 5 6 if ( $( this ).is( ':checked' ) ){ //traitement }else{ //traitement }
ça vous semble une bonne solution?