Discussion :

[caius2]

Bonjour,

cela fait un looooong moment que je cherche sans comprendre pourquoi ni trouver d'où vient le problème même si je connais la 1ère cause (regarder entre la chaise et le clavier pour trouver le fautif)

alors voilà, j'ai un tableau fait avec le plugin "editablegrid" dans ce tableau j'ai une cellule qui contient au lien. au clic sur ce lien, cela m'affiche une div contenant un autre tableau de gestion de contact. le contenu de ce tableau dépend d'un script php qui va parcourir une table de ma base de données et le ldap. Il s'y trouve également un bouton qui affiche un formulaire (qui dépend d'un autre script encore) pour ajouter une nouveau contact à mon tableau.

le problème vient du fait que lorsque je clic sur le lien dans l'editablegrid exemple : une fois pour afficher(show()) l'autre div, une deuxième fois pour masquer (avec hide() ) cette fameuse div. Si je viens à cliquer sur ce lien une 3e fois et par la suite à cliquer le bouton d'ajout (faisant apparaitre le formulaire), alors le script php qui lui est associé sera appelé 3x.

le code :

ceci correspond au div contenant le tableau de contact et le formulaire :

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
 <!--  div avec tout le contenu ( datatable + bouton s ) qui apparait lorsqu'on clique sur "gestion_contact" de la colonne contact dans l'editablegrid -->
    <div id="full_gest_dest" >
        <p>Gestion des destinaires </p>
 
        <!--  div contenant les bouton ajout (ouvrant le formulaire) et de fermeture de la fenetre-->
        <div id="div_head">
            <a id="showLinkDest" class="button green"><i class="fa fa-plus"></i> Ajouter un destinaire</a>
            <a href="#" class="DestClose">Fermer</a>
        </div>
 
        <!--  div contenant le datatable -->
        <div id="dest_scol">
 
        </div>
    </div>
 
    <!--  div avec tout le contenu (formulaire + boutons )  qui apparait lorsqu'on clique sur "ajouter un contact" -->
    <div id="full_link_Form">
        <!--  div contenant le formulaire d'ajout d'un lien -->
        <div id="add_destinataires"></div>
 
        <!-- div contenant les boutons pour valider ou annuler le formulaire -->
        <div class="row tright">
            <a id="addbuttonGestionnaire" class="button green"><i class="fa fa-save"></i> Valider</a>
            <a id="cancelbuttonSelect" class="button delete">Annuler</a>
        </div>
    </div>

ceci est le code qui, lorsqu'on clic sur "gestion_contact" (le lien dans la cellule du tableau editablegrid) ouvre le tableau des contacts (affichage géré par datatables)

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
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
$adresse = $_POST['id'];
 
*
 * compte le nombre d'enregistrement de contact présent pour une adresse donnée.
 */
$select_nb_contact = 'SELECT id FROM contact_adresse WHERE id_adresse = '.$adresse.' AND destinataire = 1 ';
$result_nb = $mysqli->query($select_nb_contact) or die('erreur sur le calcul du nombre decontacts');
$num_rows = mysqli_num_rows($result_nb);
 
 
 
/*
 *  requetes mysql pour obtenir les infos du contact (uid, type) en focntion de l'adresse
 *
 */
$select_dest = 'SELECT contact_adresse.uid,contact_adresse.id, type_contact.lib_type FROM contact_adresse, adresse_livraison, type_contact
                WHERE contact_adresse.id_adresse = adresse_livraison.id_adresse AND contact_adresse.id_type = type_contact.id_type AND adresse_livraison.id_adresse = ' . $adresse . ' ';
$result_select = $mysqli->query($select_dest) or die('erreur sur la selection des contacts');
$mysqli->close();
 
 
/*
 * requete ldap sur l'uid pour recupérer le cn du contact
 *
 * */
$ds = ldap_connect($serveurLdap, $port);
$liste_dest = array();
while ($row = $result_select->fetch_assoc()) {
 
    $filtre = "(&(uid=" . $row['uid'] . "))";
    $sr = ldap_search($ds, $racine, $filtre, $restrict, 0) or die ("Error in search query");
    $info = ldap_get_entries($ds, $sr);
 
    for ($i = 0; $i < $info["count"]; $i++) {
        $liste_dest[] =  [  'uid' => $info[$i]["uid"][0],
                            'cn' => $info[$i]["cn"][0],
                            'type'=> $row['lib_type'],
                            'id' => $row['id'] ];
    }
}
 
 
$ret = '
<script>
 
var nb_contact = '.$num_rows .';
var id=' . $adresse . ';
        LinkDestinataire = function(id)
        {
            var self = this;
            $.ajax({
                url: "./TEST/adresse_destinataire/new_liste_contact.php",
                type: "POST",
                dataType: "html",
                data: {
                    id_addr:id                           
                },
                success: function (response)
                {
                    if (response) {  
                       $("#add_destinataires").empty().html(response);
                    }
                    else
                        message("erreur","Erreur dans la requete de gestion des destinataires !");
                },
                error: function(XMLHttpRequest, textStatus, exception) { 
                    alert("Ajax failure\\n" + textStatus); 
                },
                async: true
 
            });
 
        };
 
        if (nb_contact >= 1){
             $("#showLinkDest").hide();
              $("#showLinkDest").replaceWith("<p>Vous ne pouvez plus enregistrer de destinataire : nombre limite atteint</p>");
 
        }else 
             $("#showLinkDest").show();
 
 
         $("#addbuttonGestionnaire").click(function () {
            addNewGest(id); //fonction se trouvant dans adresse.js
        });
 
 
        $("#showLinkDest").click(function () {
            if ( $("#full_link_Form").css("display", "none") ){
                 $("#full_link_Form").show();
                 LinkDestinataire(id);
 
            }else {
                 $("#full_link_Form").hide();
            }
 
        });
 
        $("#cancelbuttonSelect").click(function () {
                $("#full_link_Form").hide();
        });
 
      </script>
 
<!-- tableau des destinataires apparaissant dans la gestion des destinataires-->
 <table id="destinataire_scol_list" class="display">
    <thead>
    <tr>
        <th>CN 1</th>
        <th>UID</th>
        <th>Type</th>
        <th>contact</th>
        <th>destinataire</th>
        <th> Supprimer</th>
     </tr>
    </thead>
    <tbody> ';
foreach ($liste_dest as $key => $value) {
    $ret .= '<tr>';
    $ret .= '<td id="cn">' . $value['cn'] . '</td>';
    $ret .= '<td id="uid">' . $value['uid'] . '</td>';
    $ret .= '<td id="type">' . $value['type'] . '</td>';
    $ret .= '<td id="contact" >' . $value['id'] . '</td>';
    $ret .= '<td id="destinataire">oui/non</td>';
    $ret .= '<td><img class="supprimer" src="../../ressources/images/cross.png" onclick="deleteContact('.$value['id'].')" alt="supprimer"></td>';
    $ret .= '</tr>';
}
 
$ret .= ' </tbody> </table>';
 
echo $ret;

la fonction javascript qui lie le tout :

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
57
58
59
60
61
62
63
64
65
66
67
 
/*
 * fonction réagissant au click sur "gest-dest" dans la colonne Destinataire
 */
DatabaseGrid.prototype.destinataire_addr = function (id) {
 
    var self = this;
    $.ajax({
        url: './TEST/adresse_destinataire/new_gestion_contact.php',
        type: 'POST',
        dataType: "html",
        data: {
            id: id,
        },
        success: function (response) {
            if (response) {
                showAddLink();
                $('#dest_scol').html(response);              // c'est ici qu'est ajouter le tableau de contact à la div
                $('#destinataire_scol_list').DataTable().destroy();
                $(document).ready(function () {
                    $('#destinataire_scol_list').DataTable({
                        "columnDefs": [
                            {
                                "width": "0px",
                                "targets": 0
                            }
                        ],
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/French.json"
                        }
 
                    });
                });
                DestClose();
 
            }
            else
                message("erreur", "Erreur dans la requete");
        },
        error: function (XMLHttpRequest, textStatus, exception) {
            alert("Ajax failure\n" + textStatus);
        },
        async: true
 
    });
 
};
 
 
function showAddLink() {
  //  if ($("#full_gest_dest").is(':visible')) {
        $("#full_gest_dest").toggle();
        //$("#full_link_Form").toggle();
   // }
  //  else
   //     $("#full_gest_dest").show();
};
 
/*
 * ferme destinaire
 */
function DestClose() {
    $('.DestClose').click(function () {
        $('#full_gest_dest').hide();
        $('#full_link_Form').hide();
    })
};

voilà.
Je pense que le problème vient de mes ouverture et fermeture de div... mais je ne sais pas où se trouve mon erreur... à force de reprendre mon code, je n'arrive plus à voir

svp, pourriez-vous me dire ce que je fais de mal ??

merci d'avance

[headmax]

Salut c'est une question récurrente : pour empêcher des clics multiples il te faut passer le paramètre EVENT a ta function $(...).click(function(event){...}); et effectuer avant tout chose un event.stopImmediatePropagation(); et un event.preventDefault();.

Ainsi le faire a chaque fois que tu as un événement clic pour éviter ce type de désagrément. soit :

Code javascript :

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

1
2
3
4
5
6
7
 
$(...).click(function( event ) {
  event.stopImmediatePropagation();
  event.preventDefault();
  //la suite de tes instructions
  ...
});

https://api.jquery.com/event.stopimmediatepropagation/
https://api.jquery.com/event.preventDefault/

[caius2]

pardon pour le retard, merci pour ta réponse !