[AJAX] Supprimer un enregistrement

**linar009** · 26/07/2006, 15h56

Comment répercuter une suppression de ligne d'un tableau directement sur la base de données ?
Je m'explique : j'ai un tableau dans lequel j'affiche n transactions donc n lignes. Sur chaque ligne se trouve un bouton supprimer qui permet de supprimer la ligne en cours.
Pour le moment j'arrive parfaitement à supprimer dynamiquement la ligne de l'interface mais cette suppression n'est pas repercutée sur la base de données (c'est -à -dire que si je fais un refresh la ligne réapparait)
Je sais qu'il faut utiliser AJAX et XmlHttpRequest mais je ne vois pas comment faire

Merci

**FremyCompany** · 26/07/2006, 16h24

Supposons l'architecture HTML suivante :

Code :

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

1
2
3
4
5
6
7
8
9
<tr>
    <td style="display: none">ID (DB-KEY)</td>
    <td>NAME</td>
    <td>AGE</td>
    <td>LOCATION</td>
    ...
    <td><input onclick="deleteRow(this)" type="button" /></td>
</tr>
...

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
deleteRow=function(button) {
    button.disabled=true;
    var row=button;
    while (row.tagName.toLowerCase() != "tr") {
        if (row.parentNode) {
             row=row.parentNode;
        } else {
              return false;
        }
    }
    var IDCol=row.getElementsByTagName("td")[0];
    var nameCol=row.getElementsByTagName("td")[0];
    // Supposons une fonction getTagText retournant le contenu textuel de la balise
    var ID=getTagText(IDCol);
    // Supposons une fonction envoyant au serveur les données à supprimer et détruisant la ligne du TABLE donnée en argument
    deleteID(ID,row);
    // Pour deleter la ligne :
    // row.parentNode.removeChild(row);
}

**linar009** · 27/07/2006, 08h10

Je pense que t'as pas vraiment compris ma question Fremy... La suppression de la ligne c'est bon j'ai fait et ca fonctionne à merveille. C'est la suppression de l'enregistrement correspondant dans la base que je n'ai pas fait...

**FremyCompany** · 27/07/2006, 09h27

lol, tu as lu mon code ?
Il s'agit d'une explication sur la méthode à utiliser pour recueillir les données que tu as besoin d'envoyer au serveur pour la suppression de la ligne dans ta base de donnée (ici j'ai supposé que tu avais un champ ID comme clé)

Voici des lors le code de deleteID (qui recoit l'ID et la ligne HTML concernée)

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
// Renvoie le texte de l'objet ActiveXObject le plus récent depuis une liste
var pickRecentProgID = function (idList){
	// found progID flag
    var bFound = false;
    for(var i=0; i < idList.length && !bFound; i++){
        try{
            var oDoc = new ActiveXObject(idList[i]);
            o2Store = idList[i];
            bFound = true;
        }catch (objException){
            // trap; try next progID
        };
    };
    if (!bFound)
		throw ("Aucun ActiveXObject n'est valide sur votre ordinateur, pensez à mettre à jour votre navigateur");
    idList = null;
    return o2Store;
}
 
// Retourne un nouvel objet XmlHttpRequest
var GetXmlHttpRequest_AXO=null
var GetXmlHttpRequest=function () {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest()
	}
	else if (window.ActiveXObject) {
		if (!GetXmlHttpRequest_AXO) {
			GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
		}
		return new ActiveXObject(GetXmlHttpRequest_AXO)
	}
	return false;
}
 
// Compatibilité avec lu tutoriel
getXhr=GetXmlHttpRequest;
 
deleteID=function(ID, row) {
    try {
        var xhr=getXhr();
        xhr.open("POST","deleteLine.aspx?ID="+escape(ID), false)
        // soit user et pwd des identifiants valide uniquement pour la page deleteLine pemettant d'empecher 
        // la suppression de la ligne par simple "typing" de l'url "deleteLine?ID=1" dans la barre d'url
        xhr.send("user=" + escape(user) + &pwd=" + escape(pwd))
        if (xhr.responseText=="true") {
            row.parentNode.removeChild(row)
        } else {
            alert("Supperssion de ligne impossible: le serveur renvoie une erreur:" + xhr.responseText)
        }
    } catch (ex) {
        alert("Suppression de ligne impossible: " + ex.message)
    }
}

**linar009** · 27/07/2006, 09h33

(Ok excuse moi pour l'incompréhension(je débute dans AJAX))

En tout cas, merci beaucoup pour ton bout de code qui me sera très utile !

Et donc finalement la requête SQL de suppression (DELETE FROM table WHERE ...) se trouverait dans ta page deleteLine.aspx, c'est bien ça ?

Parce qu'à la base, c'était surtout ça que je voulais savoir (où se trouve la requête SQL et à quel moment la lance-t-on?)

**FremyCompany** · 27/07/2006, 09h34

Juste pour que tu n'ais pas à tout lire :
Ton serveur doit contenir une page deleteLine.aspx prenant comme paramètre ID (GET), user et pwd (POST)
1/ Il vérifie que user est bien egal à "admin"
2/ Il vérifie que pwd est bien egal à "delete"
3/ Il executre un SQL:"DELETE * FROM TABLE WHERE ID = '" + Request("ID") + "'"
4/ Il retourne true en cas de réussite et un message d'erreur en cas d'échec

La ligne HTML n'est supprimée qu'en cas de renvoi de true

**linar009** · 27/07/2006, 09h35

Par contre, j'ai pas vraiment saisi l'objectif de la fonction pickRecentProgID ...

**FremyCompany** · 27/07/2006, 09h41

lol, c'est parceque contrairement à ce qu'on croit, il n'y a pas que 2 objets ActiveX XmlHttpRequest, mais un bon paquet ! Certains sont forni par IE, d'autres sont plus performants et sont fourni lors de l'intstallation, par exemple de MSXML... La fonction pickRecentProgID essaie tous les noms d'activeX passés en arguments (et classés par version) et retourne le premier qui a fonctionné... L'évolution ne tient pas tant à la fontion send ou open mais au mode responseXML... à la base j'utilise aussi cette fonction pour retrouver l'activeX XMLDOM le plus récent...

**linar009** · 27/07/2006, 10h02

Ok Merci pour toutes ces infos

**linar009** · 28/07/2006, 10h06

Par contre, user et pwd tu les déclares où et comment ?

**FremyCompany** · 28/07/2006, 10h41

Ben tu les remplaces par des valeurs dans le texte final...

Code :

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

1
2
3
4
        // soit user et pwd des identifiants valide uniquement pour la page deleteLine pemettant d'empecher 
        // la suppression de la ligne par simple "typing" de l'url "deleteLine?ID=1" dans la barre d'url
        var user="delete"; var pwd="delete.111@serveur.com";
        xhr.send("user=" + escape(user) + &pwd=" + escape(pwd))

N'importe qui peut les lire, mais on s'en fiche... l'interet et de passer des arguments pas POST pour empecher de pouvoir suprimer une ligne et tapant une URL

Esssaie de mettre un nom user et pwd les plus différents possible de ceux qu'il faut utiliser pour acceder à ton site, pour plus de sécurité...

**linar009** · 28/07/2006, 10h49

Comme tu me la dit, j'ai bien fait un :

xhr.send("addsupid_org=" + escape(id_org) + "&addsup_plan_seq=" + escape(plan_seq)+ "&addsup_date=" + escape(plan_date));

J'ai placé un echo $_POST["addsup_plan_seq"]; dans ma page PHP pour voir si elle reçoit bien mes POST

Et lorsque je fais alert (xhr.responseText) ,apparemment il n'y a rien dans mon $_POST["addsup_plan_seq"]. Du coup ma requête SQL ne fait rien.

Pourquoi ?

**linar009** · 28/07/2006, 13h26

Comment se fait-il qu'il n'y ait rien dans mes $_POST ?

**FremyCompany** · 28/07/2006, 14h00

"_" n'est pas url-encoded... (urlencode de PHP, escape de JS, ...)
Supprime le et utilise plutot un autre caractère...
Pour rappel, les caractères legals sont :
les lettres, les chiffres, certains caractères, le %HX (HX étant un code hexadécimal)

**linar009** · 28/07/2006, 14h17

Ok mais ca marche toujours pas :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
   try {
        var xhr=getXhr();
        xhr.open("POST","../../includes/bd_action.php?act=delPlanif", false);
        xhr.send("addsupIdOrg=" + id_org + "&addsupPlanSeq=" + plan_seq + "&addsupDate=" + plan_date);
        if(xhr.readyState == 4 && xhr.status == 200){
			alert (xhr.responseText);
            document.getElementById('tableauPlanif').deleteRow(ligne.rowIndex);
        } else {
            alert("Supperssion de ligne impossible: le serveur renvoie une erreur:" + xhr.responseText);
        }
    } catch (ex) {
        alert("Suppression de ligne impossible: " + ex.message);
    }
   }

Et sur ma page PHP :

Code :

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

echo $_POST["act"];

(c'est pour tester pour le moment, ne croyez que je m'amuse à faire du AJAX juste pour afficher la valeur d'une variable...)

**linar009** · 28/07/2006, 15h00

Meme avec :

Code :

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

1
2
xhr.open("GET","../../includes/bd_action.php?act=delPlanif&addsupIdOrg=" + id_org + "&addsupPlanSeq=" + plan_seq + "&addsupDate=" + plan_date, false);
		xhr.send(null);

rien!

**FremyCompany** · 28/07/2006, 15h10

mdrr, act était la SEULE variable en mode GET et tu arrives encore a faire ton test sur celle-la

Pour elle fallait utiliser $_GET, non ?

Et aussi : n'oublie pas les escape

**linar009** · 28/07/2006, 15h14

Je ne suis pas si c** quand même bien sûr que j'utilisais $_GET!
Je crois avoir saisi mon problème : en fait, la variable plan_date est une date au format AAAA-MM-JJ et je pense que c'est les "-" qui posent problème.
Je vais essayer je te redis ça

Au fait pour les escape je pense que ce n'est pas nécessaire puisque ce ne sont que des valeurs numériques...

**linar009** · 28/07/2006, 15h19

Bon bah ça marche toujours pas !
Ca fait un bail que je suis là dessus et j'arrive à rien
Ca m'agace !

**FremyCompany** · 28/07/2006, 15h41

Envoyé par linar009

Bon bah ça marche toujours pas !
Ca fait un bail que je suis là dessus et j'arrive à rien
Ca m'agace !

Lol, avec escape, tu ne devrais plus avoir de problème... escape c'est pareil à urlencode de PHP (au cas ou je ne te l'aurais pas encore dit

)

Il est indipensable lorsque tu utilises des caractères non url-encoded...
Par précaution, je l'utilise quelque soit le contenu des variables

Code :

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

1
2
3
4
5
Code :
        // soit user et pwd des identifiants valide uniquement pour la page deleteLine pemettant d'empecher 
        // la suppression de la ligne par simple "typing" de l'url "deleteLine?ID=1" dans la barre d'url
        var user="delete"; var pwd="delete.111@serveur.com";
        xhr.send("user=" + escape(user) + &pwd=" + escape(pwd))

[AJAX] Supprimer un enregistrement

JavaScript

Discussions similaires

Partager

Partager