Nats3
Messages postés2Date d'inscriptionjeudi 10 juillet 2008StatutMembreDernière intervention23 mars 2009
-
20 mars 2009 à 23:01
Nats3
Messages postés2Date d'inscriptionjeudi 10 juillet 2008StatutMembreDernière intervention23 mars 2009
-
23 mars 2009 à 08:53
Bonjour avant toutes choses je tiens à m'excuser des possibles erreurs
que je vais effectuer concernant ma requête sur le forum (c'est mon
premier post). J'espère que vous ne m'en tiendrez pas rigueur.
Mon problème est le suivant. Je viens de me mettre à l'ajax et à prototype.
Je souhaite insérer une ligne dans ma base de données avec prototype par l'intermédiaire d'un formulaire que voici:
A l'insertion de mon artiste un tableau doit se créer dynamiquement
pour m'afficher mon insertion avec deux liens images (une image pour
modifier, l'autre pour supprimer).
Dans mon html je cree un
ou le tableau devra être créé.
Voici mon artists2.js
var artist = {
response: null,
responseArtist: null,
// la fonction init doit initialiser, pas lancer de requete aJAX
init:function(){
// on recupere le formulaire
var theForm = $$("form").first();
// On attache un listener sur l'evenement submit
theForm.observe("submit", function(e){
// Comme on bind la fonction sur le formulaire, this est le formulaire
var url = 'getArtistAdded.php';
new Ajax.Request(url, {
method: 'get',
// On serialize le formulaire pour avoir les valeurs saisies
parameters : this.serialize(true),
onSuccess: function(transport){
artist.responseArtist = transport.responseText.evalJSON();
if (artist.responseArtist.artist[0] !=false){
artist.writeArtistTable(artist.responseArtists.artist);
} else {
$('artist').innerHTML = "Veuillez entrer un artiste";
}
}
});
}.bindAsEventListener(theForm));
},
writeArtistTable : function(response){
var table = new Element('table', {'id': 'tbArtist'});
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);
tr0.insert(th1);
tr0.insert(th2);
table.insert(tr0);
response.each(function(elt){
var tr1 = new Element('tr');
var td1 = new Element('td').update(elt.art_id);
var td2 = new Element('td').update(elt.art_name);
var td3 = new Element('td');
var imgModif = new Element('img', {'src': 'modifier.png', 'alt': 'modifier', 'title': 'modifier', href: 'artist2.php?modif=elt.art_id'});
td3.insert(imgModif);
var td4 = new Element('td');
var imgSuppr = new Element('img', {'src': 'supprimer.png', 'alt': 'supprimer', 'title': 'supprimer', href: 'artist2.php?suppr=elt.art_id'});
td4.insert(imgSuppr);
tr1.insert(td1);
tr1.insert(td2);
tr1.insert(td3);
tr1.insert(td4);
table.insert(tr1);
});
$('artist').appendChild(table);
}
};
Event.observe(window, 'load', artist.init);
Pour finir mon php pour inserer l'artiste (getArtistAdded.php)
// On recupere l'id de l'artiste pour l'afficher$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();
}
?>
Le problème vient forcement d'artists.js car quand je mets le lien du
php pour inserer getArtistAdded.php dans l'action du formulaire
l'insertion se passe sans problème.
Concretement, il ne passe rien, je n'ai aucun message d'erreur
Je vous remercie d'avance pour votre aide et surtout votre compréhension ajax et prototype sont tout nouveau pour moi.
jdmcreator
Messages postés647Date d'inscriptionsamedi 30 décembre 2000StatutMembreDernière intervention20 juillet 20127 21 mars 2009 à 19:15
Bonjour,
Malheureusement je crois que tu es beaucoup meilleur que moi en Javascript. Mais comme je ne voyais aucune réponse, je vais essayer de t'aider.
D'abord inputtype= textarea n'existe pas. Je ne sais pas si c'était volontaire mais la balise approprié est <textarea>Je ne connais pas non plus l'Ajax ni Prototype ni le PhP
Mais je me suis inspiré d'un document sur Internet sur la fonction createElement pour créer ceci :
<html>
<head>
<title>Titre</title>
</head>
<script type="text/javascript">
var mon_div = null;
var nouveauDiv = null;
function ajouteTableau() {
// crée un tableau
// et lui donne un peu de contenu
nouveauTable = document.createElement("table");
nouveauTable.innerHTML = "<tr><td></td></tr><tr><td>Mon artiste : "+document.getElementById('art_name').value+"
</td><tr><td>Info sur l'artiste</td></tr>";
nouveauTable.border='1';
nouveauTable.style.border='3px solid red';
// ajoute l'élément qui vient d'être créé et son contenu au DOM
mon_div = document.getElementById("org_div1");
document.body.insertBefore(nouveauTable, mon_div);
}
</script>
Ajouter Artiste |
<textarea name ="art_name" id=art_name></textarea>,
----
|
</html>
Je ne crois pas avoir répondu à ton problème mais si cela peut t'aider, c'est déjà cela ;). Sinon, je ne suis pas sûr de bien le comprendre.