[AJAX] Supprimer un enregistrement

Version imprimable

Voir 40 message(s) de cette discussion en une page

26/07/2006, 15h56
linar009

[AJAX] Supprimer un enregistrement

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

Supposons l'architecture HTML suivante :

Code:

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:

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);
}

27/07/2006, 08h10
linar009

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...

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:

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)
    }
}

27/07/2006, 09h33
linar009

(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?)
27/07/2006, 09h34
FremyCompany

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
27/07/2006, 09h35
linar009

Par contre, j'ai pas vraiment saisi l'objectif de la fonction pickRecentProgID ...
27/07/2006, 09h41
FremyCompany

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...
27/07/2006, 10h02
linar009

Ok Merci pour toutes ces infos
28/07/2006, 10h06
linar009

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

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

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é...

28/07/2006, 10h49
linar009

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 ?
28/07/2006, 13h26
linar009

Comment se fait-il qu'il n'y ait rien dans mes $_POST ?
28/07/2006, 14h00
FremyCompany

"_" 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)

Ok mais ca marche toujours pas :

Code:

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:

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...)

Meme avec :

Code:

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!

28/07/2006, 15h10
FremyCompany

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 ;)
28/07/2006, 15h14
linar009

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...
28/07/2006, 15h19
linar009

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

Citation:

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
Citation:
Code:

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))

Voir 40 message(s) de cette discussion en une page