Discussion :

[netlink1987]

bonjour à tous
mes compétences étant trés limitées dans ce domaine (et pas que ...) je me tourne vers vous
pour trouver de l'aide.

Description:

1 - J'envoie une requête POST / AJAX /JSON vers une api qui me répond avec des données de format JSON (fonction liste)
2 - je dois lire ces données retournées sur un champs ciblé (parseJSON)
3 - je dois repasser une fonction pointant sur ces données (fonction remove)

Si j'envoie bien la requête, reçoit bien les données et sait extraire ce que je cherche, je ne sais en revanche pas comment passer ma fonction "remove" en pointant sur les données lues.

Je suis clair ? Pas sur hein .... voici le 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
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
function liste() {
    $.ajax({
        type: "POST",
        url: "/cgi/liste.cgi",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify({
            "apiVersion": "1.0",
            "context": "789",
            "method": "list",
            "params": {}
        }),
        success: function (data) {
            parseJSON(data);
        },
        error: function (err) {
            console.log("Probleme rencontre", err);
        }
    }); // cette requete fonctionne, les données sont bien envoyées
    var parseJSON = function (data) {
        $(data).each(function (i) {
            createHTML(this);
        });
    }
    var createHTML = function (element) {
        for (var i = 0; i < element.data.textOverlays.length; i++) {
            var overresult = $("<p>").html(element.data.textOverlays[i].identity);
            $("#overlaytexte").append(overresult);
            // ici je cherche donc à recupérer le contenu de "identity" qui sont des entiers compris entre 1 et 4 que je dois supprimer apres
            // ces nombres apparaissent bien dans la div overlaytexte
        };
    }
    // ci-dessous la fonction suppliste() qui me permet de supprimer les données de "identity", j'ai mis 1 comme donnée fixe mais ce que je souhaite c'est supprimer les données récupérées précédemment avec liste()
    function suppliste() {
        $.ajax({
            type: "POST",
            url: "/cgi/remove.cgi",
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify({
                "apiVersion": "1.0",
                "context": "789",
                "method": "remove",
                "params": {
                    "identity": 1 // c'est ici que je devrais mettre les données lues avant
                }
            }),
            success: function (data) {
                $("#overlaytexte").html("<strong><font color=red>Texte supprime !" + (JSON.stringify(data)) + "</font></strong>");
            }
        });
    }
}

Pour moi c'est trop compliqué, je ne sais pas comment lancer cette requette avec les bonnes valeurs.

D'avance merci.

[Toufik83]

Salut,

Le plus simple est de déclarer une variable var identities; tout au début du script, et quand tu reçois les données dans le success d'ajax de liste(), tu affectes les valeurs à identities pour l'initialiser, et après tu l'utilises dans suppliste() (à condition qu'il est au moins intialisé!).

Code :

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

1
2
3
4
5
6
7
8
9
 
var identities;
function liste() {...}
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);
        });
    }

Et dans suppliste(), il ne reste plus qu'à passer identities en paramètre :

Code :

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

1
2
3
4
 
"params": {
                    "identity": identities
                }

Après tu peux remplacer la boucle for par $.each pour utiliser les fonctions jQuery :

Code :

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

1
2
3
4
5
6
 
createHTML = function (element) {
 $(element.data.textOverlays).each(function(index,overlay){
     $("#overlaytexte").append($("<p data-id='"+overlay.identity+"' >").html(overlay.identity));
 });
 }

L'attribution de data-id aux <p> te sera utile après ...

[netlink1987]

Merci toufik pour ton aide, j'ai testé avec ce code sans succès, quand je tente d'afficher le contenu
de identities je recupere "undefined"

Peut etre que la variable n'est pas déclarée au bon endroit (var identities)?

Voici le code modifié:

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
 
 
var identities;
function listoverlaytexte(){
    $.ajax({
        type: "POST",
        url: "/cgi/dynamicoverlay/dynamicoverlay.cgi",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify({
           "apiVersion": "1.0",
           "context": "789",
           "method": "list",
           "params": {
                          }
                }),
 
                success: function( data ){
                console.log("data :",data);
                parseJSON(data);
                                },
        error: function(err)
                        {
                        console.log("Probleme rencontre", err);
                        }
                });
 
                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);
        });
            }
 
    function suppliste(){
 
    $.ajax({
        type: "POST",
        url: "/cgi/dynamicoverlay/dynamicoverlay.cgi",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify({
           "apiVersion": "1.0",
           "context": "789",
           "method": "remove",
           "params": {
           "identity": identities    // si je remplace identities par 1, la fonction fonctionne, identities est "undefined"
                         }
                }),
        success: function( data ){
        $( "#overlaytexte" ).html( "<strong><font color=red>Texte supprime !" + (JSON.stringify(identities)) + "</font></strong>" );
                                }
    });
}

merci pour votre aide.

[Toufik83]

A quel moment tu appelles la fonction suppliste et ou ?

Sinon et si tu veux le faire proprement, il faut que liste() retourne une promesse et l'objet $.Deferred() :

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 liste(){
    var def=$.Deferred();
    $.ajax({url:"/cgi/liste.cgi",dataType:"json",data:{....},method:"post"})
   .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();//retourne une promesse de l'objet deferred.
 }
 
 //appelle de liste() avec when et then vu qu'elle est une fonction asynchrone :
$.when(liste())
.then(function(d){
    console.log("identities :",d);
});
 
function suppliste(){//Je veux toujours savoir à quel moment tu appelles cette fonction et ou? dans le même script? ou bien ailleurs...?
   //....
}

[netlink1987]

Toufik,

Oui le problème est la car j'appelle les 2 fonctions liste() et suppliste() avec 2 boutons différents type "onclick()", je ne voudrais appeler
qu'une seule fonction qui appelle suppliste().

Quand je procède avec les 2 boutons onclick(), la variable "identities" dans ce cas est vide.

Je teste ce que tu as mis ci-dessous.

[NoSmoking]

Bonjour,
au passage, lorsque l'on écrit dataType: "json", lors d'une requête le résultat retourné n'a pas besoin d'être parser, donc console.log("data :",data) affiche un objet JavaScript.

[netlink1987]

bon pas facile de faire tourner un programme même avec de bons conseils quand on ne
comprend que la moitié du code, je trouve quand meme que la syntaxe de langage est particuliere.

Je constate par exemple que les variables sont toujours statiques ?

Voici ou j'en suis, erreur "ReferenceError: parseJSON is not defined"

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
 
function liste(){
    var def=$.Deferred();
    $.ajax({
        type: "POST",
        url: "/cgi/liste.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){
console.log("identities :",d);
});
 
    function suppliste(){
 
    $.ajax({
        type: "POST",
        url: "/cgi/suppr.cgi",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify({
           "apiVersion": "1.0",
           "context": "789",
           "method": "remove",
           "params": {
           "identity": identities
                         }
                }),
        success: function( data ){
        $( "#overlaytexte" ).html( "<strong><font color=red>Texte supprime !" + (JSON.stringify(data)) + "</font></strong>" );
                                }
    });
 
}

[Toufik83]

NoSmoking ce n'est pas jQuery.parseJSON qu'il utilise dans le callback success , c'est juste une fonction qui as le même nom du parseJSON qu'on connait.

netlink1987, Normal que ça te retourne cette erreur, parce que tu n'as pas collé les fonctions parseJSON() ni createHTML:

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
 
var identities;
function liste(){
    var def=$.Deferred();
    $.ajax({
        type: "POST",
        url: "/cgi/liste.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){
console.log("identities :",d);
});
 
function suppliste(){
 
    $.ajax({
        type: "POST",
        url: "/cgi/suppr.cgi",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify({
           "apiVersion": "1.0",
           "context": "789",
           "method": "remove",
           "params": {
                  "identity": identities
            }
            }),
        success: function( data ){
              $( "#overlaytexte" ).html( "<strong><font color=red>Texte supprime !" + (JSON.stringify(data)) + "</font></strong>" );
        }
    });
 
}
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);
        });
}

Comme il est possible aussi de mettre identities comme paramètre de la fonction suppliste() :

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
 
function suppliste(ids){
    $.ajax({type: "POST",
        url: "/cgi/suppr.cgi",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify({
           "apiVersion": "1.0",
           "context": "789",
           "method": "remove",
           "params": {
                  "identity": ids
            }
         }),
       success:function(){//ton code...
       }
})
}

Puis quand tu veux l'appeler, tu lui passe la variable identities dans le paramètre :

Code :

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

1
2
3
4
 
$("LeBouton").click(function(){
    suppliste(identities);
});

[netlink1987]

Merci toufik,

j'ai toujours une erreur "Invalid value for parameter identity" mais parce que la fonction qui permet de supprimer les IDs de "identities" envoie:

apiVersion "1.0"
context "789"
method "remove"
params {…}
identity […]
0:3

Hors elle devrait envoyer comme paramètre 3

Par ailleurs que se passe-t-il si liste() renvoie : 1,2,3,4 ? est ce que la fonction suppliste() pourra supprimer ces 4 valeurs ?

[Toufik83]

Normalement identities est un tableau contenant seulement des nombres [3,2,1], et la fonction suppliste() prend ces valeurs pour les envoyer à url: "/cgi/suppr.cgi".

Mais ce que je ne comprends pas c'est identity […] 0:3 , d'où sort ce 0:3 ? à moins que 0 c'est l'index et 3 est la valeur ?

[netlink1987]

La fonction liste() envoie bien:

[HTTP/1.1 200 OK 33ms]

apiVersion "1.0"
context "789"
method "list"
params {}

Et elle reçoit:

success :
Object { apiVersion: "1.0", context: "789", data: {…}, method: "list" }
form-scripts.js:124:19
identities
Array [ 1 ]
JSON
apiVersion "1.0"
context "789"
data Object { imageFiles: […], imageOverlays: [], textOverlays: […] }
identity 1
position "topRight"
....

La fonction supliste envoie ceci:

Je ne sais pas d'ou cela vient.

[Toufik83]

Oui, c'est ce que j'ai dis, comme "identities" est un tableau alors le 0 est l'index et 1 c'est la valeur.

tu as toujours l'erreur quand tu exécutes suppliste() ?

[netlink1987]

Oui suppliste() ne supprime pas la valeur en question, pourtant dans la fonction si je code en dur
la valeur à 1 par exemple, ça fonctionne.

[Toufik83]

Et la destination serveur "cgi/remove.cgi", comment elle interprète la variable identity ? comme un chiffre ou bien comme un tableau ?

Montre son code afin que l'on comprennes un peu plus...

[netlink1987]

voici la réponse complete de la fonction liste()

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
 
{
    "apiVersion": "1.0",
    "context": "789",
    "data": {
        "imageFiles": [
            "/etc/overlays/logo(128x44).ovl",
            "/etc/overlays/logo-bmp(243x85).ovl"
        ],
        "imageOverlays": [],
        "textOverlays": [
            {
                "camera": 1,
                "fontSize": 48,
                "identity": 1,
                "position": "topRight",
                "scalable": true,
                "scrollSpeed": 0,
                "size": [
                    192,
                    48
                ],
                "text": "essaitexte",
                "textBGColor": "transparent",
                "textColor": "white",
                "textLength": 9,
                "textOLColor": "black",
                "visible": true,
                "zIndex": 0
            }
        ]
    },
    "method": "list"
}

Voici le format de la requête qui permet de supprimer les valeurs de "identity" utilisé dans la fonction suppliste()

Code :

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

1
2
3
4
5
6
7
8
9
 
{
  "apiVersion": "1.0",
  "context": "789",
  "method": "remove",
  "params": {
        "identity": 1
  }
}

La fonction cgi/remove attend un chiffre unique compris entre 1 et 4 obtenu par la fonction liste().

[Toufik83]

La fonction cgi/remove attend un chiffre unique compris entre 1 et 4 obtenu par la fonction liste().

Alors là, il fallait réfléchir un peu et paramétrer la fonction de l'api avec un tableau et pas un chiffre unique...mais bon on peut contourner ce problème si on envoie une requête ajax vers "cgi/remove" pour chaque chiffre de "identities".

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
 
$(identities).each(function(index,value){
    $.ajax({
        type: "POST",
        url: "/cgi/suppr.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);
    });
 
});

[netlink1987]

ok toufik mais ce code je le mets ou dans le programme ?
Ce n'est pas une fonction que je peux appeler par un bouton ?

Suis paumé

[netlink1987]

Je te remets le code complet du coup avec ta modification:

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
 
var identities;
function liste(){
    var def=$.Deferred();
    $.ajax({
        type: "POST",
        url: "/cgi/liste.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){
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);
        });
}
 
$(identities).each(function(index,value){
    $.ajax({
        type: "POST",
        url: "/cgi/remove.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);
    });
 
});

Avec ceci j'obtiens bien la liste des IDs de identity mais la fonction suppliste() n'est pas éxécutée.

[Toufik83]

le code $(identities).each() doit être mis dans le gestionnaire d'événement click, (tu ne m'as pas montré le code du click sur les boutons...)

Code :

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

1
2
3
4
 
$("id ou classe du Bouton Supprimer").click(function(){
    $(identities).each(.....);//met le ici
});

Et tu peux maintenant supprimer suppliste().

[netlink1987]

désolé de t’embêter encore ...

En fait j'ai un bouton "supprimer" qui devrait donc faire appel à liste() , est-il possible d'y intégrer du coup le code de suppression
des IDs entity ? Je ne peux pas avoir 2 boutons (je l'ai fait comme exemple) un seul bouton doit pouvoir lister de manière cachée
les IDs et les supprimer.