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 ?

Ajax + Prototype + Mysql

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager