Ajax + Prototype + Mysql

**nkordiko** · 11/03/2009, 12h09

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**gwyohm** · 11/03/2009, 13h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
var imgModif = new Element("img", {
  src : "modifier.png",
  alt : "modifier",
  title : "modifier"
});

**nkordiko** · 12/03/2009, 10h32

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**gwyohm** · 12/03/2009, 11h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);

**nkordiko** · 13/03/2009, 12h04

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**gwyohm** · 13/03/2009, 12h45

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**nkordiko** · 16/03/2009, 22h06

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

onSuccess(transport){

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**gwyohm** · 17/03/2009, 10h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

onSuccess : function(transport){

**nkordiko** · 17/03/2009, 23h13

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

**gwyohm** · 18/03/2009, 10h22

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...

**nkordiko** · 18/03/2009, 10h57

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

**gwyohm** · 18/03/2009, 19h36

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

**nkordiko** · 19/03/2009, 22h49

Voilà mes fichiers. Je suis à ta disposition pour toutes informations supplémentaires dans tous les cas un grand merci.

**gwyohm** · 20/03/2009, 03h55

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 ?

**nkordiko** · 20/03/2009, 09h16

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

**RomainVALERI** · 20/03/2009, 10h33

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

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

**nkordiko** · 02/04/2009, 23h53

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**gwyohm** · 03/04/2009, 19h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

On remplace par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**nkordiko** · 25/06/2009, 22h27

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Ajax + Prototype + Mysql

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager