Insertion et Creation d'un tableau dynamique

Nats3 Messages postés 2 Date d'inscription jeudi 10 juillet 2008 Statut Membre Dernière intervention 23 mars 2009 - 20 mars 2009 à 23:01
Nats3 Messages postés 2 Date d'inscription jeudi 10 juillet 2008 Statut Membre Dernière intervention 23 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:

<formaction= "artists2.php"method="post"enctype="multipart/form-data">

----

Ajouter Artiste |
type ="textarea"name= "art_name" />,

----

|
type ="submit"value="Valider" />,

</form>

Dans le <head> bien sur j'ai

<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="scripts/artists2.js"></script>

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)

<?phpinclude_once("connexion.php"); ?>
<?php
mysql_select_db($database, $base);
 
function remplaceBR($chaine)
{
$chaine = str_replace("\r\n","
",$chaine);
$chaine = str_replace("\n","
",$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 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.

2 réponses

jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 7
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 &lttextarea&gt;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.

Le document est ici : https://developer.mozilla.org/fr/DOM/document.createElement

------JDMCreator
0
Nats3 Messages postés 2 Date d'inscription jeudi 10 juillet 2008 Statut Membre Dernière intervention 23 mars 2009
23 mars 2009 à 08:53
Merci je vais vérifier mon code avec les éléments que tu m'as apporté.
0
Rejoignez-nous