Ajax + Prototype + Mysql

Version imprimable

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 mettre à l'ajax et à prototype.

Je souhaite inserer une ligne dans ma base de données avec prototype par l'intermediaire d'un formulaire que voici:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

Dans le <head> bien sur j'ai

Code:

1
2
<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 <div id="artists"> ou le tableau devra être créé.

Voici mon artists2.js

Code:

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
var artist = {
	response: null,
	responseArtist: null,
	init:function(){
		var url = 'getArtistAdded.php';
		new Ajax.Request(url, {
		  method: 'get',
		  onSuccess(transport){
		    artist.responseArtist = transport.responseText.evalJSON();
		    if (artist.responseArtist.artist[0] !=false){
			artist.writeArtistTable(artist.responseArtists.artist);
		   } else {
		       $('artist').innerHTML = "Veuillez entrer un artiste";
		              }
		}
		});
 
	writeArtistTable : function(response){
	  var table = document.createElement('table');
	  table.id="tbArtist";
	  var tr0 = document.createElement('tr');
	  var th0 = document.createElement('th');
	  var td0 = document.createElement('td');
	  th0.innerHTML = "ID";
	  tr0.appendChild(th0);
	  th0 = document.createElement('th');
	  th0.innerHTML = "Artiste";
	  tr0.appendChild(th0);
	  th0 = document.createElement('th');
	  th0.setColSpan(2);
	  th0.innerHTML = Action;
	  tr0.appendChild(th0);
	  table.appendChild(tr0);
	  response.each(function(elt){
	    var tr1 = document.createElement('tr');
	    var td1 = document.createElement('td');
	    td1.innerHTML = elt.art_id;
	    var td2 = document.createElement('td');
	    td2.innerHTML = elt.art_name;
	    var td3 = document.createElement('td');
	    var imgModif = document.createElement('img');
	    imgModif.src = "modifier.png";
	    imgModif.alt = "modifier";
	    imgModif.title = "modifier";
	    imgModif.href="artist2.php?modif=elt.art_id";
	    td3.appendChild(imgModif);
	    var td4 = document.createElement('td');
	    var imgSuppr = document.createElement('img');
	    imgSuppr.src = "supprimer.png";
	    imgSuppr.alt = "supprimer";
	    imgSuppr.title = "supprimer";
	    imgModif.href="artist2.php?suppr=elt.art_id";
	    td4.appendChild(imgSuppr);
	    tr1.appendChild(td1);
	    tr1.appendChild(td2);
	    tr1.appendChild(td3);
            tr1.appendChild(td4);
	    table.appendChild(tr1);
	    });
	     $('artist').appendChild(table);
	    }
 
	Event.observe(window, 'load', artist.init);

Pour finir mon php pour inserer l'artiste (getArtistAdded.php)

Code:

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
<?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 vous remercie d'avance pour votre aide et surtout votre compréhension ajax et prototype sont tout nouveau pour moi.

11/03/2009, 12h29
gwyohm
Salut,

Je n'ai pas compris quel est ton problème : qu'est ce qui ne fonctionne pas ?

Un petit truc étrange tout de même : pourquoi es-tu en multipart/form-data ? tu fais de l'upload ?

Sinon, puisque tu débutes en prototype, voici un premier point d'amélioration : en utilisant Element, la création de HTML est facilitée :
Exemples simples :
Code:

1 2 3 4 5 var table = new Element("table"); var tr = new Element("tr"); var td = new Element("td").update("mon texte"); table.insert(tr.insert(td));
Avec des attributs :
Code:

1 2 3 4 5 6 var imgModif = new Element("img", { src : "modifier.png", alt : "modifier", title : "modifier" });
12/03/2009, 09h32
nkordiko
Citation:
Envoyé par gwyohm

Salut,

Je n'ai pas compris quel est ton problème : qu'est ce qui ne fonctionne pas ?

Un petit truc étrange tout de même : pourquoi es-tu en multipart/form-data ? tu fais de l'upload ?

Sinon, puisque tu débutes en prototype, voici un premier point d'amélioration : en utilisant Element, la création de HTML est facilitée :
Exemples simples :

Code:

1 2 3 4 5 var table = new Element("table"); var tr = new Element("tr"); var td = new Element("td").update("mon texte"); table.insert(tr.insert(td));

Avec des attributs :

Code:

1 2 3 4 5 6 var imgModif = new Element("img", { src : "modifier.png", alt : "modifier", title : "modifier" });
Merci pour les améliorations suggérées.
Pour répondre à ta question le formulaire engendre une insertion dans une base de données mysql et je ne fais pas d'upload de fichier donc je n'ai pas besoin de multipart/form-data .
Mon problème est le suivant avec le code que je vous ai montré plus haut il ne se passe rien. J'en ai déduit que le problème vient d' artists2.js car quand je mets getArtistAdded.php en action du formulaire l'insertion se fait sans problème.

Merci d'avance

OK, j'ai regardé ton code d'un peu plus près, il y a quelques erreurs que j'ai vu tout de suite :

Code:

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
var artist = {
	response: null,
	responseArtist: null,
	init:function(){
		var url = 'getArtistAdded.php';
		new Ajax.Request(url, {
		  method: 'get',
		  onSuccess(transport){
		    artist.responseArtist = transport.responseText.evalJSON();
		    if (artist.responseArtist.artist[0] !=false){
			artist.writeArtistTable(artist.responseArtists.artist);
		   } else {
		       $('artist').innerHTML = "Veuillez entrer un artiste";
		              }
		}
		});
	}, // Il manque l'accolade de fin de ta fonction et une virgule pour la nouvelle
	
	writeArtistTable : function(response){
	  var table = document.createElement('table');
	  table.id="tbArtist";
	  var tr0 = document.createElement('tr');
	  var th0 = document.createElement('th');
	  var td0 = document.createElement('td');
	  th0.innerHTML = "ID";
	  tr0.appendChild(th0);
	  th0 = document.createElement('th');
	  th0.innerHTML = "Artiste";
	  tr0.appendChild(th0);
	  th0 = document.createElement('th');
	  th0.setColSpan(2);
	  th0.innerHTML = Action;
	  tr0.appendChild(th0);
	  table.appendChild(tr0);
	  response.each(function(elt){
	    var tr1 = document.createElement('tr');
	    var td1 = document.createElement('td');
	    td1.innerHTML = elt.art_id;
	    var td2 = document.createElement('td');
	    td2.innerHTML = elt.art_name;
	    var td3 = document.createElement('td');
	    var imgModif = document.createElement('img');
	    imgModif.src = "modifier.png";
	    imgModif.alt = "modifier";
	    imgModif.title = "modifier";
	    imgModif.href="artist2.php?modif=elt.art_id";
	    td3.appendChild(imgModif);
	    var td4 = document.createElement('td');
	    var imgSuppr = document.createElement('img');
	    imgSuppr.src = "supprimer.png";
	    imgSuppr.alt = "supprimer";
	    imgSuppr.title = "supprimer";
	    imgModif.href="artist2.php?suppr=elt.art_id";
	    td4.appendChild(imgSuppr);
	    tr1.appendChild(td1);
	    tr1.appendChild(td2);
	    tr1.appendChild(td3);
            tr1.appendChild(td4);
	    table.appendChild(tr1);
	    });
	     $('artist').appendChild(table);
	    }
	}; // Il manque l'accolade de fin du "namespace" artist
	Event.observe(window, 'load', artist.init);  
  /*
    Mais là tu lances une requete AJAX directement... je ne pense pas que c'est ce que tu veux faire
  */
});

Je te propose donc plus :

Code:

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
 
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(this.action, {
			  method: 'get',
			  // On serialize le formulaire pour avoir les valeurs saisies
			  parameters : this.serialize(true),
			  onSuccess(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 = document.createElement('table');
	  table.id="tbArtist";
	  var tr0 = document.createElement('tr');
	  var th0 = document.createElement('th');
	  var td0 = document.createElement('td');
	  th0.innerHTML = "ID";
	  tr0.appendChild(th0);
	  th0 = document.createElement('th');
	  th0.innerHTML = "Artiste";
	  tr0.appendChild(th0);
	  th0 = document.createElement('th');
	  th0.setColSpan(2);
	  th0.innerHTML = Action;
	  tr0.appendChild(th0);
	  table.appendChild(tr0);
	  response.each(function(elt){
	    var tr1 = document.createElement('tr');
	    var td1 = document.createElement('td');
	    td1.innerHTML = elt.art_id;
	    var td2 = document.createElement('td');
	    td2.innerHTML = elt.art_name;
	    var td3 = document.createElement('td');
	    var imgModif = document.createElement('img');
	    imgModif.src = "modifier.png";
	    imgModif.alt = "modifier";
	    imgModif.title = "modifier";
	    imgModif.href="artist2.php?modif=elt.art_id";
	    td3.appendChild(imgModif);
	    var td4 = document.createElement('td');
	    var imgSuppr = document.createElement('img');
	    imgSuppr.src = "supprimer.png";
	    imgSuppr.alt = "supprimer";
	    imgSuppr.title = "supprimer";
	    imgModif.href="artist2.php?suppr=elt.art_id";
	    td4.appendChild(imgSuppr);
	    tr1.appendChild(td1);
	    tr1.appendChild(td2);
	    tr1.appendChild(td3);
            tr1.appendChild(td4);
	    table.appendChild(tr1);
	    });
	     $('artist').appendChild(table);
	    }
	};
	Event.observe(window, 'load', artist.init);

Salut gwyohm,

j'ai bien regardé les modifications que tu as apporté mais le problème reste le même à l'execution du script. Il ne se passe rien.

Par contre au niveau de ta correction tu as laissé la var url en commentaire. Je l'ai dé commenté plus bas

Code:

1
2
// Comme on bind la fonction sur le formulaire, this est le formulaire
			//var url = 'getArtistAdded.php';

Au niveau de la requete ajax voici le début de ton code

Code:

1
2
new Ajax.Request(this.action, {
			  method: 'get',

Ne faut il pas mettre url au lieu de this.action? Je sais ma question peut être stupide mais je préfère la poser pour continuer mon apprentissage.

J'ai également mis à jour la génération du html selon tes recommandations ;)

Voila ce que je te propose (après mes modifs le problème reste le même, rien après l'execution du script)

Code:

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
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(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");
	  table.insert(tr0.insert(th0));
	  var th1 = new Element('th').update("Artiste");
	  table.insert(tr0.insert(th1));
	  var th2 = new Element('th', {'colSpan': 2}).update("Action");
	  table.insert(tr0.insert(th2));
	  response.each(function(elt){
	    var tr1 = new Element('tr');
	    var td1 = new Element('td').update(elt.art_id);
	    table.insert(tr1.insert(td1));
	    var td2 = new Element('td').update(elt.art_name);
	    table.insert(tr1.insert(td2));
	    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);
	    table.insert(tr1.insert(td3));
	    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);
	    table.insert(tr1.insert(td4));
	    });
	     $('artist').appendChild(table);
	    }
	};
	Event.observe(window, 'load', artist.init);

Si tu vois d'autres choses

13/03/2009, 11h45
gwyohm
Salut,

Attention tout de même dans le script que je t'ai mis en exemple, je suppose que le formulaire à traiter est le premier trouvé :
Code:

1 2 var theForm = $$("form").first();
Dans le code que je t'avais proposé, j'utilisais l'action du formulaire comme URL pour la requete AJAX.
Code:

1 2 theForm.action
Maintenant si ca ne fonctionne pas, sais tu où ca ne fonctionne pas ? Comment testes-tu le formulaire si tu as firefox + firebug, tu peux voir un peu ce qui se passe dans la console. Sinon as tu essayé de mettre des alert pour voir où tu passes et ou tu ne passes pas ?

Salut, je connaissais pas la console d'erreurs (Firebug) j'y ai jetté un coup d'oeil et voici l'erreur que j'ai est la suivante:
missing: after property id à ce niveau

Code:

onSuccess(transport){

je te mets la partie du script gérant l'insertion pour que tu puisses te resituer la chose.
Code:

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 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(this.action, { method: 'get', // On serialize le formulaire pour avoir les valeurs saisies parameters : this.serialize(true), onSuccess(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)); },
J'ai testé le code sous IE et firefox le résultat est le même au niveau du navigateur il ne se passe rien pas de message d'erreur à l'affichage.

Tu voulais savoir comment je teste le formulaire:

Code:

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

Je suis repassé en enctype="multipart/form-data" car sinon l'insertion ne se fait plus quand je passe getArtistAdded dans l'action du formulaire.

J'ai artists2.php en action du formulaire car c'est lui qui fait appel au javascript et celui ci fait appel à getArtistAdded pour l'insertion par la suite.

Si j'ai bien compris ton explication cela poserait problème car quand tu fais

Code:

theForm.action

tu appelles artists2.php et non getArtistAdded selon la configuration actuelle des choses.

Voilà le raisonnement que j'applique c'est celui d'un novice et tout éclaircissement est le bien venu.

17/03/2009, 09h09
gwyohm

Salut,

tant que tu as des erreurs dans la console, il y a des choses à corriger...

Maintenant à propos de ton message d'erreur, il y a effectivement une erreur de syntaxe :

Code:

onSuccess : function(transport){
17/03/2009, 22h13
nkordiko

La correction a été apportée je n'ai plus de message d'erreur dans la console d'erreur mais il ne se passe toujours rien
18/03/2009, 09h22
gwyohm

Salut,

Dans la console firebug, tu vois passer la requete AJAX ? Tu peux mettre ton code HTML dans un post ?

Essaye de détecter où ca ne passe pas : par exemple met des alert dans ton code et trace ou ca coince...
18/03/2009, 09h57
nkordiko

J'ai maintenant une erreur au niveau de prototype (est ce possible?)

Erreur*: No registered handlers for `undefined'.
Fichier Source*: http://static.ak.fbcdn.net/rsrc.php/...5wk0kwc.pkg.js
Ligne*: 107

Erreur*: Permission refusée d'appeler la méthode Location.toString

Je ne vois pas passer la requete ajax dans la console
18/03/2009, 18h36
gwyohm

Non, je ne pense pas que ce soit prototype qui est un bug ; c'est plutot que tu l'utilises dans un contexte qui fait qu'il génère une erreur.

Envoie ton html et tes JS (ou met les en PJ) ce sera plus facile pour t'aider
19/03/2009, 21h49
nkordiko

4 pièce(s) jointe(s)

Voilà mes fichiers. Je suis à ta disposition pour toutes informations supplémentaires dans tous les cas un grand merci.
20/03/2009, 02h55
gwyohm

Plutot que le fichier PHP, il faudrait la source générée... je suppose que ton probleme se situe dans la page artists2.php ?
20/03/2009, 08h16
nkordiko

La source générée? Je t'ai mis tous les fichiers nécessaires. Je vois pas ce que tu veux :oops:
20/03/2009, 09h33
RomainVALERI

Citation:

Envoyé par nkordiko

La source générée? Je t'ai mis tous les fichiers nécessaires. Je vois pas ce que tu veux :oops:

clic droit dans la page (de ton site affiché dans le navigateur) > afficher la source > copier > coller ici (dans des balises code svp) > bingo ^^

Le retour

Je suis désolé d'avoir mis autant de temps à répondre(gwyohm qui me suit depuis le début notamment et les autres) mais mon serveur a été hacké je suis prêt à en decoudre avec l'ajax ;) et voici le code généré

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>More Than Music Radio Database</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link href="style_more_than_music.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="scripts/artists2_gwyhom.js"></script>
</head>
 <body>
 
 
<div id="Content">
 
	<h1>Artistes</h1>
 
 
 
	<div class="block">
		<form action="artists2.php" method="post" enctype="multipart/form-data">
			<input type="hidden" name="add" value="ok" />
			<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>
	</div>
	<br />
 
	<div class="block" id="artist">
	</div>
</div>
<div id="Menu">
	<a href="artists.php">Artistes</a><br />
	<a href="albums.php">Albums</a><br />
	<a href="tracks.php">Tracks</a><br />
	<a href="genres.php">Genre Musical</a><br />
 
	<a href="humeurs.php">Humeurs</a><br />	
	<a href="playlist.php">Playlist</a><br />
</div>
</body>
</html>

03/04/2009, 18h12
gwyohm
Salut,

Alors j'ai 2 points :
1/ Dans artist.init, une erreur de ma part, on attrape l'événement onsubmit, mais on ne l'arrête pas ; du coup on va quand même soumettre le formulaire. Donc lignes 9 et 10 :
Code:

1 2 3 4 theForm.observe("submit", function(e){ // On ajoute ceci qui va arrêter la propagation de l'événement e.stop();
2/ Dans artist.writeArtistTable,
Code:

1 2 var th2 = new Element('th', {'colspan', '2'}).update("Action");
On remplace par
Code:

1 2 var th2 = new Element('th', {'colspan': '2'}).update("Action");
Après ca tu devrais au moins avoir la requete AJAX qui démarre bien...

Bonjour à tous,
Je suis de retour avec un script presque fini. J'ai toujours deux trois bugs mais je pense bien m'en sortir avec votre aide :oops:

Pour rappel avec prototype et ajax à l'aide d'un formulaire j'insère un artiste.
A l'insertion je l'affiche dans un tableau sous mon formulaire initial. Tout se passe très bien sauf que le page ne se rafraichit pas et que mon script ne fonctionne pas sous Ie.

Le texte taper dans le champ texte reste présent et il suffit d'appuyer sur valider pour que l'insertion se fasse. Comme la page ne se rafraichit pas les insertions s'affichent les unes en dessous des autres.

Mes liens dans le tableau crées dynamiquement ne fonctionnent pas

Code:

var imgModif = new Element('img', {'src': 'modifier.png', 'alt': 'modifier', 'title': 'modifier', href: '/art_nat.php?modif=elt.art_id'});

Sous Ie j'appuie sur Valider et il ne passe rien.
Voici mes scripts.

Mon formulaire

Code:

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
<?include "_debut.php";?>
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="scripts/art_nat.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 class="block">
		<div id="arts"></div>
	</div>
 
</div>
<?include "_fin.php";?>

Mon script d'insertion

Code:

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
<?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("Une erreur s'est produite lors de l'enregistrement de l'artiste.");
}
 
?>

Mon javascript pour finir

Code:

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
var artists = {
 
    justAdded : null,
 
    init : function(){
        if($('monForm') && $('go')){
            Event.observe(
                $('go'),
                'click',
                function(evt){
                    Event.stop(evt);
                    var url = $('monForm').action;
 
                    new Ajax.Request(url, {
                      method: 'post',
                      parameters : $('monForm').serialize(true),
                      onSuccess: function(transport){
                        artists.justAdded = transport.responseText.evalJSON();
                        if(!Object.isString(artists.justAdded)){
							artists.writeArtistsTable(artists.justAdded.arts);
                        }
                        else if(Object.isString(artists.justAdded)){
                            $('arts').innerHTML = artists.justAdded;
                        }
                    }
                    });	
                }
            );
        }
    },
 
	writeArtistsTable : function(justAdded){
	  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', {'colspan': '2'}).update("Action");
	  tr0.insert(th0);
	  tr0.insert(th1);
	  tr0.insert(th2);
	  table.insert(tr0);
	  justAdded.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: '/art_nat.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: '/art_nat.php?suppr=elt.art_id'});
	    td4.insert(imgSuppr);
	    tr1.insert(td1);
	    tr1.insert(td2);
	    tr1.insert(td3);
	    tr1.insert(td4);
	    table.insert(tr1);
	    });
	     $('arts').appendChild(table);
	    }
 
}
 
document.observe('dom:loaded', artists.init);

Je vous remercie d'avance.