Mon problème est le suivant. Je viens de mettre à l'ajax et à prototype.
Je souhaite insérer une ligne dans ma base de données avec prototype par l'intermediaire d'un formulaire que voici:
Code : Tout sélectionner
<form action="artists2.php" method="post" 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" /></td>
</tr>
</table>
</form>
Code : Tout sélectionner
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="scripts/artists2.js"></script>Dans mon html je cree un <div id="artists"> ou le tableau devra être créé.
Voici mon artists2.js
Code : Tout sélectionner
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);
<?php include_once("connexion.php"); ?>
<?php
mysql_select_db($database, $base);
function remplaceBR($chaine)
{
$chaine = str_replace("\r\n","<br>",$chaine);
$chaine = str_replace("\n","<br>",$chaine);
return $chaine;
}
if(isset($_POST['art_name'])){
$name = strip_tags($_POST['art_name']);
// Premiere insertion sans l'id
$texte = remplaceBR($texte);
$query01="INSERT INTO artists(art_id, art_name) VALUES ('NULL', '$name')";
$result01=mysql_query($query01);
$id=mysql_insert_id();
// 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();
}
?>
<?php
do {
$result[] = $row_artist;
} while ($row_artist = mysql_fetch_object($artist));
echo '{"artist":'.json_encode($result).'}';
?>
Le problème vient forcemment 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.Je n'ai aucun message d'erreur à l'ecran, il ne passe rien quand j'execute le script.
Je vous remercie d'avance pour votre aide et surtout votre compréhension ajax et prototype sont tout nouveau pour moi.