Bonjour,
Je suis novice en ajax et je suis en train de mettre en place un admin pour alimenter une base de données.
J'ai un formulaire d'ajout et sous celui ci s'affiche mon insertion une fois celle ci correctement effectuée.
Cette insertion est modifiable ou supprimable grâce à des liens créés dynamiquement suite à l'insertion.
Lorsque je lance mon script de modification mon tableau de modification apparait furtivement mais je le temps de voir que la valeur a bien été récupérée par contre les boutons de mon formulaire n'apparaissent j'ai retourné le code dans tous les sens et je ne trouve pas d'erreur.
Je joins le code pour que vous puissiez me comprendre, n'hésitez pas à revenir vers si vous avez des questions.
Je vous remercie d'avance.
voici mon formulaire
[code]<?include "_debut.php";?>
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="scripts/art_nat_art_modif.js"></script>
<div id="Content">
<h1>Artistes</h1>
<div class="block">
<form method="post" action="newArtist.php" name="monForm" id="monForm" enctype="multipart/form-data">
<table>
<tr>
<th>Ajouter Artiste </th>
<td><input type="textarea" name="art_name" /></td>
</tr>
<tr>
<th></th>
<td><input type="submit" value="Valider" id="go" /></td>
</tr>
</table>
</form>
</div>
<br />
</div>
<?include "_fin.php";?>[/code]
Le php créant l'insertion
[code]<?php include_once("connexion.php"); ?>
<?php
mysql_select_db($database, $base);
if(!empty($_POST['art_name'])){
$query_artist = sprintf("INSERT INTO artists(art_name) VALUES('%s');", $_POST['art_name']);
$artist = mysql_query($query_artist, $base);
if($artist == true){
$id = mysql_insert_id();
$query_artist = sprintf("SELECT * FROM artists WHERE art_id = $id");
$artist = mysql_query($query_artist, $base) or die(mysql_error());
$row_artist = mysql_fetch_assoc($artist);
$result = array();
do {
$result[] = $row_artist;
} while ($row_artist = mysql_fetch_object($artist));
echo '{"arts":'.json_encode($result).'}';
}
}
else{
echo json_encode("Veuillez Entrer Un Artiste");
}
?>[/code]
Mon Js
[code]var artists = {
// tous les artistes
lastAddedArtist: null,
// le div conteneur
container: null,
// fonction d'init
init: function() {
var sbmButton = $("go");
var frm = $("monForm");
if(sbmButton && frm) {
sbmButton.observe("click", artists.postArtist);
}
},
// pst un artiste en ajax au script php. l'url est l'action du formulaire
postArtist: function(e) {
// on stop l'événement
e.stop();
// nouvelle requete ajax
new Ajax.Request($("monForm").action, {
method: "post",
parameters : $("monForm").serialize(true),
// on externalise le call back pour plus de lisibilité
onSuccess:artists.artist_callBack
});
},
// call back retour ajax
artist_callBack: function(response) {
// on evalue le JSON
var lastArtist = response.responseText.evalJSON();
// si le resultat est de type string, c'est un message d'erreur
if(Object.isString(lastArtist)) {
//on affiche une erreur
artists.writeError(lastArtist);
}
else {
// reinit du formulaire
$("monForm").reset();
// on, ajoute l'artiste à la liste de ceux déjà créés
// note : le json retourné est de la forme : {arts:[{art_id: "id", art_name: "name"}]}
// il pourait etre plus simple : {art_id: "id", art_name: "name"}
// la ligne suivante serait alors simplement :
artists.lastAddedArtist = lastArtist.arts[0];
// on dessine les artistes
artists.drawArtists();
}
},
// ecriture d'un message d'erreur
writeError: function(message) {
// on obtient le conteneur et on l'update avec le message
artists.getContainer().update(message);
},
// dessine les artistes du tableau artists.allArtists
drawArtists : function() {
// on construit la table
var table = new Element('table');
// header
var tr0 = new Element('tr');
var th0 = new Element('th').update("ID");
var th1 = new Element('th').update("Artiste");
var th2 = new Element('th', {colspan: '2'}).update("Action");
tr0.insert(th0).insert(th1).insert(th2);
table.insert(tr0);
// ... toujours donner les noms les plus significatifs possibles, ca aide toujours 6 mois après
var artist = artists.lastAddedArtist;
var tr1 = new Element('tr');
var td1 = new Element('td').update(artist.art_id);
var td2 = new Element('td').update(artist.art_name);
var td3 = 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);
td3.insert(imgModifLink);
imgModifLink.insert(imgModif);
var td4 = 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);
td4.insert(imgSupprLink);
imgSupprLink.insert(imgSuppr);
tr1.insert(td1).insert(td2).insert(td3).insert(td4);
table.insert(tr1);
// on obtient le conteneur
var container = artists.getContainer();
// on enleve tout ce qu'il contient
container.childElements().invoke("remove");
// on update à vide et on insere la table
$('arts').innerHTML = "";
container.update("").insert(table);
},
// renvoie le conteneur
getContainer : function() {
// si'il est null
if(! artists.container) {
// on le crée en deux fois
var block = new Element("div", {"class": "block"});
$("Content").insert(block);
artists.container = new Element("div", {"id": "arts"});
block.insert(artists.container);
}
// on le renvoie
return artists.container;
}
};
var modifArtist = {
// le div conteneur
container: null,
url: null,
// fonction d'init
init: function(){
modifArtist.url = "modifArtist.php";
},
// on dessine l'artiste à modifier
drawArtModifier : function(){
// on construit le formulaire
var form = new Element('form', {"action": modifArtist.url, "name": "monForm", "id": "monForm", "enctype": "multipart/form-data"});
// on récupère la valeur de l'artiste
modifArtist.aEffectuer = artists.lastAddedArtist;
// on construit la table
var table = new Element('table');
var tr0 = new Element('tr');
var th0 = new Element('th').update("Modifier Artiste");
var td0 = new Element('td');
var txtarea = new Element('textarea', {"name": "art_name"}).update(modifArtist.aEffectuer.art_name);
td0.insert(txtarea);
tr0.insert(th0).insert(td0);
table.insert(tr0);
var tr1 = new Element('tr');
var th1 = new Element('th');
var td1 = new Element('td');
var sbt = new Element('input', {type: "submit", "value": "Valider", "id": "go"});
td1.insert(sbt);
form.insert(sbt);
var btn = new Element('input', {type: "button", "value": "Annuler"});
td1.insert(btn);
form.insert(btn);
tr1.insert(th1).insert(td1);
table.insert(tr1);
form.insert(table);
// on obtient le conteneur
var container = modifArtist.getContainer();
// on enleve tout ce qu'il contient
container.childElements().invoke("remove");
// on update à vide et on insere la table
$('arts').innerHTML = "";
container.update("").insert(table);
},
// renvoie le conteneur
getContainer : function() {
// si'il est null
if(! modifArtist.container) {
// on le crée en deux fois
var block = new Element("div", {"class": "blockmodif"});
$("Content").insert(block);
modifArtist.container = new Element("div", {"id": "arts"});
block.insert(modifArtist.container);
}
// on le renvoie
return modifArtist.container;
}
};
document.observe('dom:loaded', function() {
artists.init();
modifArtist.init();
});[/code]
