Synchroniser la suppression d'un identifiant

**Zalawy** · 07/06/2019, 16h02

Bonjour,

J'espère que je suis au bon endroit pour exposer mon problème. Pour commencer, la partie de frontend que le tableau où la liste des logins et mot de passes, l'opération est déjà prévu pour la modification. Et j'utilise le web service pour communiquer et échanger les données. Je souhaite d'ajouter une nouvelle action : supprimer un identifiant. Le niveau de WS fonctionne à merveille. Mais au niveau de front, j'ai dû mal à insérer le bout de code pour supprimer un identifiant lequel j'ai pu référencer une méthode SupprimerUnIdentifiant de WS.

Voici le script sur la modification suivant : La balise en gras : j'ai ajouté un bouton, Delete et ce dernier affiche bien

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
// Chargement de toutes les identifiants
function chargerIdentifiant() {
    $.ajax({
        url: 'Api/ApiParamHabilitation.asmx/ChargerParamIdentifiants',
        type: 'POST',
        contentType: "application/json",
        dataType: 'json',
        success: function (response) {
            var jsonD = jQuery.parseJSON(response.d);
            var items = jsonD.DonneesSortie;
            var t = $('#maTable').DataTable();
            $.each(items, function (i, item) {
                t.row.add([
                   '' + item.Login,
                    '' + item.MotDePasse,
                    '<button type=\"button\" class=\"data-popup-open btn btn-secondary\"  data-popup-open=\"popup-1\">Edit</button> <button type=\"button\" class=\"data-popup-openD btn btn-secondary\" style=\"background-color:blue;\" data-popup-open=\"popup-2\">Delete</button>', 
                ]).draw();
            });
            console.log('Statut Chargement:' + jsonD.Statut);
        },
        error: function (response) {
            var jsonD = jQuery.parseJSON(response.d);
            console.log('Statut Chargement:' + jsonD.Statut);
        }
    });
}

//Cliquer le bouton Edit pour faire un popup de modification
$(window).load(function () {
    var idEvalActuelle = "";
    var table = $('#maTable').DataTable();
    $('#maTable tbody').on('click', 'tr', function () {
        var data = table.row(this).data();

        $('#Login').val("" + data[0]);
        $('#MotDePasse').val("" + data[1]);
        idEvalActuelle = data[0];

        var that = $('[data-popup-open]');
        var targeted_popup_class = jQuery(that).attr('data-popup-open');
        $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
    });

    //Cliquer pour fermer le popup
    $('[data-popup-close]').on('click', function (e) {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');
        $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

        e.preventDefault();
    });
	
	//Valider la modification 
    function confirmerModification() {
        var donneesLg = $("#Login").val();
        var donneesPwd = $("#MotDePasse").val();
        $.ajax({
            url: 'Api/ApiParamIdentifiant.asmx/ModifierUnLogin',
            type: 'POST',
            contentType: "application/json",
            dataType: 'json',
            data: JSON.stringify({
                donneesEntree: idEvalActuelle + "," + donneesLg + "," + donneesPwd,
            }),
            success: function (response) { //Retour la modification succès ou échoué
                var jsonD = jQuery.parseJSON(response.d);
                messageModification = jsonD.DonneesSortieModif;
                alert(messageModification);
                location.reload(true);
            },
            error: function (response) {

                fail(response);
            }
        });

        function fail(reponse) {
            var jsonD = jQuery.parseJSON(response.d);
            console.log("Statut Modification identifiat:" + jsonD.Statut);

        }
    }

    $('#Buttonvalider').click(function () {
        $('.popup-inner').hide();
        confirmerModification();
    });

    // Le curseur au niveau du menu
    var elt = $('#Identifiant');
    $('#Acceuil').removeClass("active");
    $('#Parametres').removeClass("active");
    $('#Deconnexion').removeClass("active");
});


// Pour la Datatable
function applyDatatable() {
    $('#maTable').DataTable({
        language: {
            processing: "Traitement en cours...",
            search: "Rechercher :",
            lengthMenu: "Afficher les menus",
            info: "Affichage de l'element",
            infoEmpty: "Affichage de l'element sur des elements",
            infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
            infoPostFix: "",
            loadingRecords: "Chargement en cours...",
            zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
            emptyTable: "Aucune donnée disponible dans le tableau",
            paginate: {
                first: "Premier",
                previous: "Pr&eacute;c&eacute;dent",
                next: "Suivant",
                last: "Dernier"
            },
            aria: {
                sortAscending: ": activer pour trier la colonne par ordre croissant",
                sortDescending: ": activer pour trier la colonne par ordre décroissant"
            }
        }
    });
}

$(document).ready(chargerIdentifiant(), applyDatatable(), function () {

});

Le script pour modification d'un identifiant qui lie au script ci-dessus, ce qui pourra vous comprendre mieux :

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
 
    <%-- PopUp--%>
    <div class="popup" data-popup="popup-1" style="display: none">
        <div class="popup-inner">
            <h2 id="nomH2">Modifier un identifiant</h2>
            <div id="editDiv" class="form-group">
                <textbox class="popMarge">Login</textbox>
                <input type="text" id="Login" class="popMargeInput" />
            </div>
            <div class="form-group">
                <textbox class="popMarge">Mot de passe</textbox>
                <input type="text" id="MotDePasse" class="popMargeInput" />
            </div>
            <button class=" btn btn-secondary popMarge" id="Buttonvalider">Valider</button>
            <button class=" btn btn-secondary popMarge" id="ButtonAnnuler" data-popup-close="popup-1">Annuler</button>
            <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
        </div>
    </div>

Mais au moment de synchroniser la suppression d'un identifiant, je suis un peu perdu avec le script en ajax, j'ai essayé d'ajouter un popup mais ça n'a pas effet. C'est DataTable que j'utilise. J'ai lu le tuto : https://datatables.net/reference/api/row().delete()
J'ai dû mal à distinguer la différence : row().delete() et row.remove()
Ce serait génial si vous m'éclairez/vous m'aidez mon problème.
Merci à l'avance.

**Toufik83** · 07/06/2019, 16h41

Salut,
désolé mais je n'arrives pas à comprendre quel est le problème exactement ?

**Zalawy** · 07/06/2019, 16h51

Je remercie de votre réponse, je travaille sur un projet et la modification est déjà prévu. Je veux ajouter une opération : supprimer un identifiant.
Comment insérer le script pour supprimer un identifiant qui est sur le tableau (les codes que j'ai indiqué s'agissent la modification)?

**SpaceFrog** · 07/06/2019, 17h17

Sur le callback de l'ajax repeuple le tableau à partir de la réponse du serveur ? ou fais un remove de la ligne supprimée ?

**Zalawy** · 07/06/2019, 17h30

Merci pour votre réponse, si je ne suis pas sûre d'avoir bien compris par "callback de l'ajax repeuple le tableau à partir de la réponse du serveur", pouvez vous m'expliquer?

**Toufik83** · 08/06/2019, 07h46

Salut,

Enlève les deux fonctions qui sont au début de document.ready et remets les à l'intérieur :

Code :

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

1
2
3
4
5
6
 
$(document).ready(  function () {
    chargerIdentifiant();
    applyDatatable();
    //copies ici tout le code qui est à l'intérieur de $(window).load et supprime cette dernière.
});

J'ai vu que window.load provoque une erreur dans la console => Uncaught TypeError: url.indexOf is not a function jquery-3.1.1.js:9793 et empêche l'exécution du script js.

Si tu l'as fait, tu verras maintenant que l'événement clic sur les <tr> de DataTable est bien appliqué, reste maintenant à savoir si tu as des id dans ton objets json pour identifier les <tr> ou non, si tu ne les a pas, tu peux soit les créer manuellement ou utiliser seulement les index des <tr> 0,1,2,3, mais à mon avis avec des id c'est plus propre, parce que tu seras obliger de supprimer les items du fichier json renvoyé par ton API.

Ce que j'ai fais moi, c'est créer un fichier php qui retourne du json comme suite :

Code php :

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

1
2
3
4
5
6
7
8
9
 
<?php
$d=[
	"d"=>["DonneesSortie"=>[]]
];
for($i=0;$i<10;$i++){
     $d["d"]["DonneesSortie"][]=["DT_RowId"=>($i+1),"Login"=>"login ".($i+1),"MotDePasse"=>"Pass ".($i+1) ];
}
echo json_encode($d);

Quand j'inspecte les <tr>, les id sont bien là, 1,2,3...10.

Après j'ai modifié un peu le each du "success" de la fonction chargerIdentifiant() comme suite :

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
 
success: function (response) {
            var jsonD = response.d;//pas besoin d'utiliser $.parseJSON() parce que tu as déjà mis dataType:"json" dans les paramètres d'ajax
            var items = jsonD.DonneesSortie;
            var t = $('#maTable').DataTable();
            $.each(items, function (i, item) {
                t.row.add([
                   item.Login,
                   item.MotDePasse,
                   "<button class='data-popup-open btn btn-secondary' style='background-color:yellow;color:black' data-popup-open='popup-1'>Edit</button>"
		   +"<button class='data-popup-openD btn btn-secondary' style='background-color:red;color:white' data-popup-open='popup-2'>Delete</button>"
		])
                 .node().id=item.DT_RowId;
		t.draw(false);
	   });
	  console.log('Statut Chargement:' + jsonD.Statut);
        }

Maintenant il te faut attacher l'événement clic aux boutons "Delete" et "Edit" et pas aux <tr>, et je ne pense pas que tu es obliger de créer un popup pour chaque action (Delete,Edit), un seul suffira et tu n'as qu'à changer seulement le titre du popup (soit Supprimer ou Modifier), exemple :

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
 
<div class="popup" id="popup_" data-popup="popup-1" style="display: none">
        <div class="popup-inner">
            <h2 id="nomH2">Ce texte changera dynamiquement selon l'action (edit ou delete)</h2>
            <div class="form-group">
                <label class="popMarge">Login</label>
                <input type="text" id="Login" class="popMargeInput" />
            </div>
            <div class="form-group">
                <label class="popMarge">Mot de passe</label>
                <input type="text" id="MotDePasse" class="popMargeInput" />
            </div>
            <button class=" btn btn-secondary popMarge" id="Buttonvalider">Valider</button>
            <button class=" btn btn-secondary popMarge" id="ButtonAnnuler" data-popup-close="popup-1">Annuler</button>
            <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
        </div>
    </div>

Ne pas oublier de supprimer la fonction de clic sur les tr et la remplacer par ce code :

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
 
        //ouvrir le popup-open
	$('#maTable').on('click','.btn', function () {
		var targeted_popup_class = $(this).attr('data-popup-open')
		, id_tr=$(this).closest('tr').attr('id')
		, data = table.row($(this).closest('tr')).data();
 
                idEvalActuelle = data[0];
                $('#popup_')
		.attr({"data-popup":targeted_popup_class,"data-id-tr":id_tr})//attribution de data-popup et data-id-tr pour #popup_
		.find('#nomH2')
                .text(targeted_popup_class=="popup-1"?"Modifier un Identifiant":"Supprimer un identifiant")//modification du titre selon l'action
		.next()
		.find("#Login").val("teste "+data[0])
		.parent()
		.next()
		.find('#MotDePasse').val(data[1])
		.closest('.popup-inner')
		.find('#ButtonAnnuler,.popup-close')
                .attr('data-popup-close',targeted_popup_class)//attribuer targeted_popup_class à 2 éléments, le <bouton> et le <a class="popup-close">
		.closest('#popup_')
		.fadeIn(350);
 
		console.log('data-popup :'+targeted_popup_class+', id tr clicked :'+id_tr
		+', button clicked :'+targeted_popup_class,' data[0] :',data[0]);
	});

Il te faut aussi ajouter la variable data_id_tr dans data d'ajax de la fonction confirmerModification() :

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
 
function confirmerModification() {
        var donneesLg = $("#Login").val();
        var donneesPwd = $("#MotDePasse").val();
	var data_id_tr=$("#popup_").attr('data-id-tr');
	console.log('le id tr est :',data_id_tr);//vérifie bien que tu as le bon id dans la console !
          $.ajax({
            .....,
            data: JSON.stringify({
                donneesEntree: idEvalActuelle + "," + donneesLg + "," + donneesPwd + "," + data_id_tr 
            }),
            success: function (response) { //Retour la modification succès ou échoué
                var jsonD = response.d;
                messageModification = jsonD.DonneesSortieModif;
                console.log(messageModification);
                //location.reload(true); pas de reload ici, sinon ajax ne sert à rien !!!
                //si l'action est "suppression", tu supprimes directement le <tr> avec son id qui a été stocké dans data-id-tr de #popup_ 
                //$('#maTable tbody tr#'+data-id-tr).remove();
            },
            //le reste du code....
        });
 
        function fail(reponse) {
            var jsonD =response.responseText;//les erreurs json sont sauvegardées dans "responseText"
        }
    }

Et finalement le bouton valider qui permet de modifier ou supprimer un identifiant :

Code :

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

1
2
3
4
5
 
$('#Buttonvalider').click(function () {
        $('#popup_').hide();//on cache le #popup_ au complet, pas seulement ".popup-inner"
        confirmerModification();
    });

Synchroniser la suppression d'un identifiant [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager