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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
| var single = {
// le single inséré
singleAdded: null,
// le div conteneur
container: null,
// fonction d'init
init: function() {
var sbmButton = $("go");
var frm = $("formSingle");
if(sbmButton && frm) {
sbmButton.observe("click", single.postSingle);
}
},
// poste un single au script php. L'url est l'action du formulaire
postSingle: function(e) {
// on stoppe l'événement
e.stop();
// nouvelle requête ajax
new Ajax.Request($("formSingle").action, {
method: "post",
parameters: $("formSingle").serialize(true),
// on externalise le call back pour plus de lisibilité
onSuccess: single.single_callBack
});
},
// call back retour ajax
single_callBack: function(response) {
// on evalue le JSON
var singleSql = response.responseText.evalJSON();
// si le résultat est de type string, c'est un message d'erreur
if(Object.isString(singleSql)) {
// on affiche une erreur
single.writeError(singleSql);
}
else {
// reinit du formulaire
$("formSingle").reset();
// le json retourné est de la forme {sgle:[{single_id: "id", single_name: "name", single_art: "id", etc...}]}
single.singleAdded = singleSql.sgle[0];
// on dessine le single
single.drawSingle();
}
},
// ecriture d'un message d'erreur
writeError: function(message) {
// on obtient le conteneur et on l'update avec le message
single.getContainer().update(message);
},
// on créé le tableau du single
drawSingle: function() {
var table = new Element('table');
var tr0 = new Element('tr');
var th0 = new Element('th').update("ID");
var th1 = new Element('th').update("Artiste");
var th2 = new Element('th').update("Single");
var th3 = new Element('th').update("Pochette");
var th4 = new Element('th').update("Année de Sortie");
var th5 = new Element('th', {colspan: '2'}).update("Action");
tr0.insert(th0).insert(th1).insert(th2).insert(th3).insert(th4).insert(th5);
table.insert(tr0);
var sql = single.singleAdded;
var tr1 = new Element('tr');
var td0 = new Element('td').update(sql.single_id);
var td1 = new Element('td').update(sql.art_name);
var td2 = new Element('td').update(sql.single_name);
var td3 = new Element('td').update(sql.single_cover);
var td4 = new Element('td').update(sql.single_release_date);
var td5 = new Element('td');
var imgModif = new Element('img', {src: 'modifier.png', alt: 'modifier', title: 'modifier'});
var imgModifLink = new Element('a',{"class":'imgModif',id: 'modif', href:''});
imgModifLink.observe("click", modifArtist.drawArtModifier);
td5.insert(imgModifLink);
imgModifLink.insert(imgModif);
var td6 = new Element('td');
var imgSuppr = new Element('img', {src: 'supprimer.png', alt: 'supprimer', title: 'supprimer'});
var imgSupprLink = new Element('a',{"class":'imgSuppr', id: 'suppr', href:''});
imgSupprLink.observe("click", supprArtist.drawArtSupprimer);
td6.insert(imgSupprLink);
imgSupprLink.insert(imgSuppr);
tr1.insert(td1).insert(td2).insert(td3).insert(td4).insert(td5).insert(td6);
table.insert(tr1);
// on obtient le conteneur
var container = single.getContainer();
// on enlève tout ce qu'il contient
container.childElements().invoke("remove");
// on update à vide et on insère la table
$('sgle').innerHTML = "";
container.update("").insert(table);
},
// renvoie le conteneur
getContainer: function() {
// si il est null
if(! single.container) {
// on le créé en deux fois
var block = new Element("div", {"class": "block"});
$("Content").insert(block);
single.container = new Element("div", {"id": "sgle"});
block.insert(single.container);
}
// on le renvoie
return single.container;
}
};
document.observe('dom:loaded', function() { single.init();}); |
