Discussion :

[Toufik83]

Ok, dans ce cas met le code en question dans le then

Code :

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

1
2
3
4
5
6
7
 
$.when(liste())
.then(function(d){
    //met le ici et remplace "identities" par "d" :
    $(d).each(....);
    console.log("identities :",d);
});

[netlink1987]

Voici le code html, c'est juste un bouton supprimer:

Code html :

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

<button type="button" class="btn btn-outline-danger btn-sm" onclick="supprimer()">Supprimer le texte</button>

[netlink1987]

Bon toufik, c'est mieux, et merci de consacrer tout ce temps pour le boulet que je suis (en javascript je précise ...)

Bon la ça commence à fonctionner, sauf que quand je clique sur le bouton, le script n'envoie que la liste, la suppression
ne se fait que si je rafraîchis la page ......

Je pensais que le bouton listais et supprimais les IDs ?

Pour résumer:
le bouton =>

Code HTML :

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

<button type="button" class="btn btn-outline-danger btn-sm" onclick="liste()">Supprimer le texte</button>

Le script:

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
var identities;
function liste(){
    var def=$.Deferred();
    $.ajax({
        type: "POST",
        url: "/axis-cgi/dynamicoverlay/dynamicoverlay.cgi",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify({
           "apiVersion": "1.0",
           "context": "789",
           "method": "list",
           "params": {}
         }),
     })
      .done(function(data){
          console.log('success :',data);
          parseJSON(data);
          def.resolve(identities);//résoudre l'objet deferred.
     })
   .fail(function(err){
      def.reject();//rejeter l'objet deferred.
      alert(err.responseText);
   });
 return def.promise();
}
 
 //appelle de liste() avec when et then vu qu'elle est une fonction asynchrone :
$.when(liste())
.then(function(d){
$(d).each(function(index,value){
    $.ajax({
        type: "POST",
        url: "/axis-cgi/dynamicoverlay/dynamicoverlay.cgi",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify({
           "apiVersion": "1.0",
           "context": "789",
           "method": "remove",
           "params": {
                  "identity": value //ici on passe la valeur de identity
            }
            })
    })
    .done(function(data){//utilise done au lieu de success
            $( "#overlaytexte" ).html( "<strong><font color=red>Texte supprime !" + (JSON.stringify(data)) + "</font></strong>" );
     })
    .fail(function(err){
            alert("erreur ajax :",err.responseText);
    });
 
});
console.log("identities :",d);
});
 
var createHTML = function (element) {
     $(element.data.textOverlays).each(function(index,overlay){
         $("#lm2soverlaytexte").append($("<p data-id='"+overlay.identity+"' >").html(overlay.identity)); //les données de "identity" s'affichent bien
     });
}
var parseJSON = function (data) {
        identities=$.map(data.data.textOverlays,function(elem,index){return elem.identity;});//retourner seulement les valeurs de identity de chaque item
        $(data).each(function (i) {
            createHTML(this);
        });
}

[Toufik83]

Ok, c'est maintenant que tu vas utiliser l'attribut data-id qu'on a ajouté toute à l'heure...

Toujours dans le then :

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
 
$.when(liste())
.then(function(d){
   $(d).each(function(index,value){
       $.ajax({
           ....
       })
       .done(function(data){
          /*il est préférable d'utiliser la réponse de "data" ici au lieu de "value", mais à condition que le retour renvoi le id qui a été supprimé. Un console.log(data) ici renvoi quoi ? */
            $("#lm2soverlaytexte [data-id='"+value+"']").remove();//on supprime le <p data-id=value> dont value = la valeur de identity (4,3,2,1...)
       })
       .fail(function(err){
           alert("Erreur ajax :",err.responseText);
       });
   });
});

[netlink1987]

alors le console.log(data) renvoie list qui est la fonction qui liste les IDs.

ça c'est quand je clique sur supprimer.

Je dois recharger la page pour que le remove fasse son effet, le click SUPPRIMER ne le fait pas.

[Toufik83]

Au début tu m'avais dit que liste() affiche ET supprime en même temps, maintenant tu me dis que la suppression doit être faite en cliquant sur le bouton supprimer.

Ce n'est pas grave, il faut seulement mettre le code de la suppression DANS suppliste() et le tour est joué.

[netlink1987]

Ah j'ai du mal m'expliquer. Désolé.

J'avais commencé par un bouton pour la fonction liste() pour voir si j'arrivais déjà à lire les valeurs de IDENTITY
puis j'avais mis un 2eme bouton SUPPRIMER pour supprimer les IDs. J'étais bien incapable de faire le lien entre ces
2 fonctions.

Mais naturellement, ce que je souhaite faire c'est avoir un seul bouton SUPPRIMER qui interroge l'api (fonction liste() ) et qui supprime
les données reçues par une nouvelle requête. Ceci de manière transparence pour l'utilisateur.

[netlink1987]

toufik,

J'ai complété le code comme tu me l'as dit et CA FONCTIONNE !

Donc un grand merci à toi pour ton aide et tout le temps passé.

Eric

[Toufik83]

au plaisir, bon courage Eric.