Discussion :

[linar009]

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]

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]

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]

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]

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

[linar009]

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

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

[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

[linar009]

C'est bon ça a l'air de marcher maintenant !
Même si maintenant mon problème c'est l'éxecution de la requête SQL...
Merci Fremy, tu m'as été d'une grande aide sur le coup là !

[linar009]

Vous savez pas s'il existe des problèmes connus entre xmlHTTPRequest et PostgresSql ?

Parce qu'il n'y a aucune de mes requêtes qui fonctionnent (avec pg_query)

Pourtant j'ai affiché la requête dans un alert et je l'ai tapé directement dans un script SQL sur postgresql et il n'y a aucun problème !