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