Récupérer une valeur dans une fonction Ajax

Version imprimable

Bonjour je créé actuellement un admin en ajax.
Je m'auto-forme en ajax et j'ai déjà été amené à vous solliciter à plusieurs reprises et nombreux d'entre vous m'ont aidé notamment Gwyohm.

Je récapitule j'ai un formulaire qui me permet d'insérer un artiste.

Le 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
<?include "_debut.php";?>
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="scripts/art_nat3.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>
<?include "_fin.php";?>

Le Script Php permettant l'insertion dans la base de données

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
<?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("Veuillez Entrer Un Artiste");
}
?>

Le 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
var artists = {
// tous les artistes
  lastAddedArtist: null,
// le div conteneur
  container: null,

// fonction d'init
	init: function() {
	var sbmButton = $("go");
	var frm = $("monForm");
	if(sbmButton && frm) {
	sbmButton.observe("click", artists.postArtist);
	}
    },

// pst un artiste en ajax au script php. l'url est l'action du formulaire
		postArtist: function(e) {
// on stop l'événement
		e.stop();
// nouvelle requete ajax
		new Ajax.Request($("monForm").action, {
		method: "post",
		parameters : $("monForm").serialize(true),
// on externalise le call back pour plus de lisibilité		
		onSuccess:artists.artist_callBack 
		});
		},
// call back retour ajax
		artist_callBack: function(response) {
// on evalue le JSON
		var lastArtist = response.responseText.evalJSON();
// si le resultat est de type string, c'est un message d'erreur
		if(Object.isString(lastArtist)) {
//on affiche une erreur
		artists.writeError(lastArtist);
		} 
		else {
// reinit du formulaire
		$("monForm").reset();
// on, ajoute l'artiste à la liste de ceux déjà créés
// note : le json retourné est de la forme : {arts:[{art_id: "id", art_name: "name"}]}
// il pourait etre plus simple : {art_id: "id", art_name: "name"}
// la ligne suivante serait alors simplement :
		artists.lastAddedArtist = lastArtist.arts[0];
// on dessine les artistes
		artists.drawArtists();
		}
		},
// ecriture d'un message d'erreur
		writeError: function(message) {
// on obtient le conteneur et on l'update avec le message
		artists.getContainer().update(message);
		},
// dessin les artistes du tableau artists.allArtists
			drawArtists : function() {
// on construit la table
			var table = new Element('table');
// header
			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).insert(th1).insert(th2);
			table.insert(tr0);
// ... toujours donner les noms les plus significatifs possibles, ca aide toujours 6 mois après
			var artist = artists.lastAddedArtist;
			var tr1 = new Element('tr');
			var td1 = new Element('td').update(artist.art_id);
			var td2 = new Element('td').update(artist.art_name);
			var td3 = new Element('td');
			var imgModif = new Element('img', {src: 'modifier.png', alt: 'modifier', title: 'modifier'});
			var imgModifLink = new Element('a',{"class":'imgModif',id: 'modif'});
			td3.insert(imgModifLink);
			imgModifLink.insert(imgModif);
			var td4 = new Element('td');
			var imgSuppr = new Element('img', {src: 'supprimer.png', alt: 'supprimer', title: 'supprimer'});
			var imgSupprLink = new Element('a',{"class":'imgSuppr',href:'art_nat.php?suppr='+artist.art_id});
			td4.insert(imgSupprLink);
			imgSupprLink.insert(imgSuppr);
			tr1.insert(td1).insert(td2).insert(td3).insert(td4);
			table.insert(tr1);
// on obtient le conteneur
				var container = artists.getContainer();
// on enleve tout ce qu'il contient
				container.childElements().invoke("remove");
// on update à vide et on insere la table
				$('arts').innerHTML = "";
				container.update("").insert(table);
				},
// renvoie le conteneur
				getContainer : function() {
// si'il est null
				if(! artists.container) {
// on le crée en deux fois
				var block = new Element("div", {"class": "block"});
				$("Content").insert(block);
				artists.container = new Element("div", {"id": "arts"});
				block.insert(artists.container);
				}
// on le renvoie
				return artists.container;
				}

				}; 

document.observe('dom:loaded', artists.init);

Une fois l'insertion effectuée celle ci s'affiche dans un tableau sous le formulaire crée en ajax+prototype+dom.

J'ai créé également deux liens permettant soit de modifier ou de supprimer cette insertion.(en rouge)

C'est là que je bloque. Je ne sais pas comment récupérer la valeur de l'artiste déjà présente dans ma fonction.(en vert)

Une fois cette valeur récupérée je souhaite créé dynamiquement un formulaire avec un textarea qui aura pour valeur l'artiste en question que l'on pourra modifier.

Voici ma nouvelle version du js pour tenter d'effectuer ce que je viens d'énoncer.

Le problème se situe au niveau de la fonction ModifArtist car lorsque je clique sur le lien pour modifier l'artiste il ne se passe rien et la fonction artists se déroule parfaitement.

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
var artists = {
// tous les artistes
  lastAddedArtist: null,
// le div conteneur
  container: null,
 
// fonction d'init
	init: function() {
	var sbmButton = $("go");
	var frm = $("monForm");
	if(sbmButton && frm) {
	sbmButton.observe("click", artists.postArtist);
	}
    },
 
// pst un artiste en ajax au script php. l'url est l'action du formulaire
		postArtist: function(e) {
// on stop l'événement
		e.stop();
// nouvelle requete ajax
		new Ajax.Request($("monForm").action, {
		method: "post",
		parameters : $("monForm").serialize(true),
// on externalise le call back pour plus de lisibilité		
		onSuccess:artists.artist_callBack 
		});
		},
// call back retour ajax
		artist_callBack: function(response) {
// on evalue le JSON
		var lastArtist = response.responseText.evalJSON();
// si le resultat est de type string, c'est un message d'erreur
		if(Object.isString(lastArtist)) {
//on affiche une erreur
		artists.writeError(lastArtist);
		} 
		else {
// reinit du formulaire
		$("monForm").reset();
// on, ajoute l'artiste à la liste de ceux déjà créés
// note : le json retourné est de la forme : {arts:[{art_id: "id", art_name: "name"}]}
// il pourait etre plus simple : {art_id: "id", art_name: "name"}
// la ligne suivante serait alors simplement :
		artists.lastAddedArtist = lastArtist.arts[0];
// on dessine les artistes
		artists.drawArtists();
		}
		},
// ecriture d'un message d'erreur
		writeError: function(message) {
// on obtient le conteneur et on l'update avec le message
		artists.getContainer().update(message);
		},
// dessine les artistes du tableau artists.allArtists
			drawArtists : function() {
// on construit la table
			var table = new Element('table');
// header
			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).insert(th1).insert(th2);
			table.insert(tr0);
// ... toujours donner les noms les plus significatifs possibles, ca aide toujours 6 mois après
			var artist = artists.lastAddedArtist;
			var tr1 = new Element('tr');
			var td1 = new Element('td').update(artist.art_id);
			var td2 = new Element('td').update(artist.art_name);
			var td3 = new Element('td');
			var imgModif = new Element('img', {src: 'modifier.png', alt: 'modifier', title: 'modifier'});
			var imgModifLink = new Element('a',{"class":'imgModif',id: 'modif'});
			td3.insert(imgModifLink);
			imgModifLink.insert(imgModif);
			var td4 = new Element('td');
			var imgSuppr = new Element('img', {src: 'supprimer.png', alt: 'supprimer', title: 'supprimer'});
			var imgSupprLink = new Element('a',{"class":'imgSuppr',href:'art_nat.php?suppr='+artist.art_id});
			td4.insert(imgSupprLink);
			imgSupprLink.insert(imgSuppr);
			tr1.insert(td1).insert(td2).insert(td3).insert(td4);
			table.insert(tr1);
// on obtient le conteneur
				var container = artists.getContainer();
// on enleve tout ce qu'il contient
				container.childElements().invoke("remove");
// on update à vide et on insere la table
				$('arts').innerHTML = "";
				container.update("").insert(table);
				},
// renvoie le conteneur
				getContainer : function() {
// si'il est null
				if(! artists.container) {
// on le crée en deux fois
				var block = new Element("div", {"class": "block"});
				$("Content").insert(block);
				artists.container = new Element("div", {"id": "arts"});
				block.insert(artists.container);
				}
// on le renvoie
				return artists.container;
				}
 
	}; 
var modifArtist = {
// le div conteneur
  container: null,
// fonction d'init
	init: function(){
	var modifLink = $("modif");
	var artModif = (artist.art_name);
	var url = "modifArtist.php"
	if (modifLink && artModif){
	modifLink.observe("click");
	}
},
 
// on dessine l'artiste à modifier
	drawArtModifier : function(){
// on construit le formulaire
	var form = new Element('form', {"action": url});
// on construit la table
	var table = new Element('table');
	var tr0 = new Element('tr');
	var th0 = new Element('th').update("Modifier Artiste");
	var td0 = new Element('td');
	var txtarea = new Element('textarea', {"name": "art_name"}).update(artist.art_name);
	td0.insert(txtarea);
	tr0.insert(th0).insert(td0);
	table.insert(tr0);
	var tr1 = new Element('tr');
	var th1 = new Element('th');
	var td1 = new Element('td');
	var sbt = new Element('input', {"type": "submit", "value": "Valider"});
	td1.insert(sbt);
	form.insert(sbt);
	var btn = new Element('input', {"type": "button", "value": "Annuler"});
	td1.insert(btn);
	form.insert(btn);
	tr1.insert(td1);
	table.insert(tr1);
	form.insert(table);
// on obtient le conteneur
		var container = modifArtist.getContainer();
// on enleve tout ce qu'il contient
		container.childElements().invoke("remove");
	},
// renvoie le conteneur
			getContainer : function() {
// si'il est null
			if(! modifArtist.container) {
// on le crée en deux fois
			var block = new Element("div", {"class": "blockmodif"});
			$("Content").insert(block);
			modifArtist.container = new Element("div", {"id": "arts"});
			block.insert(modifArtist.container);
			}
// on le renvoie
			return Modifartist.container;
			}
};
document.observe('dom:loaded', artists.init, modifArtist.init);

Je vous remercie d'avance pour votre compréhension et votre aide.

17/12/2009, 10h44
nkordiko

Bonjour,
j'ai apporté des modifications à mon script mais celui ne fonctionne toujours pas.
Je ne sais pas si c'est nécessaire mais en plus de observe que j'ai mis sur mon lien de modification

Code:

modifLink.observe("click");

J'ai mis un onClick directement sur le lien

Code:

var imgModifLink = new Element('a',{"class":'imgModif',id: 'modif', href:'', "onclick": 'modifArtist()'});

Par contre au niveau de la console d'erreur firefox j'ai un message d'erreur comme quoi modifArtist n'est pas une fonction faisant référence à la fonction artist déclarée ligne 1.

Je dois surement avoir un problème de syntaxe ou d'organisation de mon script.

Je vous remercie d'avance pour votre aide
17/12/2009, 16h48
gwyohm
Salut,

Code:

modifLink.observe("click");

ne sert à rien.
Si tu veux dire d'arreter d'observer l'événement click, il faut utiliser la méthode stopObserving :

Code:

modifLink.stopObserving("click");

Ta facon de gérer l'événement n'est pas celle préférée :
Code:

1 2 3 var imgModifLink = new Element('a',{"class":'imgModif',id: 'modif', href:''}); imgModifLink.observe("click", modifArtist);
Quand à ton erreur, modifArtist n'est pas une fonction, c'est un objet. Peut être plutôt :
Code:

1 2 3 var imgModifLink = new Element('a',{"class":'imgModif',id: 'modif', href:''}); imgModifLink.observe("click", modifArtist.drawArtModifier );
Enfin, petite remarque :

Code:

document.observe('dom:loaded', artists.init, modifArtist.init);

A l'init seule la fonction artists.init sera appelée. si tu veux lancer les 2 fonctions, il faut faire :
Code:

1 2 3 4 5 document.observe('dom:loaded', function() { artists.init(); modifArtist.init(); });
18/12/2009, 11h07
nkordiko

Gwyohm j'ai corrigé les erreurs que tu as détecté.

La console d'erreur m'indique que l'url d'action du formulaire créé dynamiquement n'est pas initialisée alors que dans ma fonction d'init je fais ça

Code:

var url = "modifArtist.php";

Voilà le formulaire

Code:

var form = new Element('form', {"action": url});

quand je passe l'url directement le problème est résolu mais je comprends pourquoi ma méthode ne fonctionne pas.

Je pense que je m'approche du résultat car je n'ai plus de message d'erreur dans la console et je vois mon tableau apparaitre une fraction de seconde.

Par contre je n'ai toujours pas d'idée pour récupérer mon artiste préalablement inséré qui se trouve dans le json

Merci

La portée de ta variable url est dans ta fonction init. Il faut qu'elle soit visible de ta fonction qui construit le formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var modifArtist = {
  container: null,
  url:null,
	init: function(){
	var modifLink = $("modif");
	var artModif = (artist.art_name);
	modifArtist.url = "modifArtist.php"
       // ...
},
 
drawArtModifier : function(){
	var form = new Element('form', {"action": modifArtist.url});
// ...

18/12/2009, 17h01
nkordiko

Ok Gwyohm modifications apportées
18/12/2009, 18h09
nkordiko

J'ai tenté ceci pour récupérer la variable

Code:

modifArtist.aEffectuer = artists.lastAddedArtist;

Code:

var txtarea = new Element('textarea', {"name": "art_name"}).update(modifArtist.aEffectuer.art_name);

Sans succès la console m'indique modifArtist.aEffectuer est nul
18/12/2009, 18h15
gwyohm

Citation:

Envoyé par nkordiko

J'ai tenté ceci pour récupérer la variable

Code:

modifArtist.aEffectuer = artists.lastAddedArtist;

Quand fais tu ça ? au moment du init c'est trop tôt : artists.lastAddedArtist n'est pas initialisé

Je récupère la valeur au moment de la création de mon formulaire.
Code:

1 2 3 4 5 6 // on dessine l'artiste à modifier drawArtModifier : function(){ // on construit le formulaire var form = new Element('form', {"action": modifArtist.url}); // on récupère la valeur de l'artiste modifArtist.aEffectuer = artists.lastAddedArtist;
Je n'ai plus de message d'erreur dans la console.
Le block de modification apparait une fraction de seconde.

Lors de l'affichage furtif de mon formulaire de modification je vois bien un textarea avec pour valeur l'artiste.
Par contre les boutons n'apparaissent pas. J'ai du mal avec le dom builder je pense pourtant avoir un code correct.

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
var form = new Element('form', {"action": modifArtist.url, "name": "monForm", "id": "monForm", "enctype": "multipart/form-data"});
// on récupère la valeur de l'artiste
	modifArtist.aEffectuer = artists.lastAddedArtist;
// on construit la table
	var table = new Element('table');
	var tr0 = new Element('tr');
	var th0 = new Element('th').update("Modifier Artiste");
	var td0 = new Element('td');
	var txtarea = new Element('textarea', {"name": "art_name"}).update(modifArtist.aEffectuer.art_name);
	td0.insert(txtarea);
	tr0.insert(th0).insert(td0);
	table.insert(tr0);
	var tr1 = new Element('tr');
	var th1 = new Element('th');
	var td1 = new Element('td');
	var sbt = new Element('input', {type: "submit", "value": "Valider", "id": "go"});
	td1.insert(sbt);
	form.insert(sbt);
	var btn = new Element('input', {type: "button", "value": "Annuler"});
	td1.insert(btn);
	form.insert(btn);
	tr1.insert(th1).insert(td1);
	table.insert(tr1);
	form.insert(table);

Code:

1
2
3
4
5
6
	var sbt = new Element('input', {type: "submit", "value": "Valider", "id": "go"});
	td1.insert(sbt);
	form.insert(sbt);
	var btn = new Element('input', {type: "button", "value": "Annuler"});
	td1.insert(btn);
	form.insert(btn);

tu ajoutes ton submit d'abord à un td puis au form... la deuxieme fois il est peut etre masqué...

Salut,
J'espère que vous passez tous de bonnes fêtes.

J'ai un peu avancé; le formulaire de modification s'affiche maintenant.
Il suffisait de rajouter # au niveau de l'href et de ne pas le laisser vide.

Code:

var imgModifLink = new Element('a',{"class":'imgModif',id: 'modif', href:'#'});

Les boutons s'affichent bien je n'avais pas besoin de faire ça

Code:

form.insert(btn);

Voilà comment je crée le bouton annuler par exemple.
Code:

1 2 var btn = new Element('input', {type: "button", "value": "Annuler"}); td1.insert(btn);
A la création du formulaire de modification j'utilise le même id que le bouton valider initiale pour réutiliser le même script pour l'affichage.

Le problème que je rencontre c'est que quand je clique sur mon bouton submit il ne se passe rien même quand je passe l'url au niveau de l'action du formulaire.

Normalement la fonction artiste devrait se lancer vu que les paramètres d'initialisations sont les suivants
Code:

1 2 3 4 5 6 7 init: function() { var sbmButton = $("go"); var frm = $("monForm"); if(sbmButton && frm) { sbmButton.observe("click", artists.postArtist); } },
Et on les retrouve bien avec le formulaire de modification
Code:

1 2 3 var form = new Element('form', {"action": modifArtist.url, "name": "monForm", "id": "monForm", "enctype": "multipart/form-data"}); ... var sbt = new Element('input', {type: "submit", "value": "Modifier", "id": "go"});
Voici ici le php chargé de faire la modification dans la base de données
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <?php include_once("connexion.php"); ?> <?php mysql_select_db($database, $base); //si modification $id = mysql_insert_id(); $query_modifArtist = sprintf("UPDATE artists SET art_name='$art_name' WHERE art_id = '$id'"); $artist = mysql_query($query_modifArtist, $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).'}'; ?>
Au niveau du bouton annuler j'aimerais faire l'equivalent de onClick=document.location.href=maPage
Pour la recharger tout simplement
mais je n'ai aucune idée concernant la syntaxe à utiliser pour l'effectuer sous prototype surement en utlisant event.observe mais je n'ai rien trouvé à ce niveau.
Merci d'avance

29/12/2009, 17h47
gwyohm
Et bien c'est exactement comme pour le bouton soumettre ;
Code:

1 2 3 4 btn.observe("click", function(e){ // ton reload })

Avant toutes choses meilleurs vœux à tous!
Pour revenir à notre sujet, j'ai pu gérer le bouton annuler qui doit recharger la page voilà ce que j'ai fait et ça fonctionne.
Code:

1 2 3 btn.observe("click", function(){ document.location.href="art_nat2.php"; });
Une résolution de problème m'amenant toujours d'autres problèmes. Quand je créé dynamiquement un textarea j'arrive à récupérer la valeur de l'artiste à modifier

Code:

var txtarea = new Element('textarea', {"name": "art_name", "rows": "1"}).update(modifArtist.aEffectuer.art_name);

Par contre quand je créé un input type text je ne peux récuperer la valeur de ce même artiste

Code:

var txtarea = new Element('input', {type: "text", "name": "art_name", "rows": "1"}).update(modifArtist.aEffectuer.art_name);

Mon autre soucis c'est qu'aléatoirement, le nom de l'artiste n'est pas présent dans la base de données alors qu'au niveau de mon tableau de contrôle tout se fait correctement.

Ce soucis empêche l'exécution de mon script de modification que voici
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <?php include_once("connexion.php"); ?> <?php mysql_select_db($database, $base); //si modification $id = mysql_insert_id(); $query_modifArtist = sprintf("UPDATE artists SET art_name='$art_name' WHERE art_id = '$id'"); $artist = mysql_query($query_modifArtist, $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).'}'; ?>
art_name étant bien le nom du champ texte

Pour finir j'ai toujours un problème d'affichage au niveau du bloc de modification j'ai une bande au dessus du bloc de modification.

Vous pouvez tester le script ici: http://morethanmusicradio.com/admin_radio/art_nat2.php

Merci d'avance

06/01/2010, 10h37
gwyohm
Salut et bonne année à toi aussi,

pour ton input text :
1. rows n'est pas un attribut valide pour un input
2. tu ne peux pas faire un update, il faut lui donner une value
Code:

1 2 3 var artname = new Element('input', {type: "text", "name": "art_name"}); artname.value = modifArtist.aEffectuer.art_name;
Malheureusement cette méthode ne fonctionnera pas je pense sous IE (l'attribut name est read only...) il faut séparer les cas (IE / reste du monde) pour faire ton input (car la méthode IE ne fonctionne pas avec les autres) :
Code:

1 2 3 4 5 6 7 var artname; if(Prototype.IE) { artname = $(document.createElement("<INPUT name='art_name' type='text'>")); } else { artname = new Element("input", {"name": "art_name", type: "text"}); }

C'est parfait au niveau de l'input text gwyohm

Cependant je galère toujours au niveau de mon script :oops:

(test ici: http://morethanmusicradio.com/admin_radio/art_nat2.php)

Si tu te rapelles j'insère mon artiste et j'ai un tableau de contrôle qui apparait avec son id on peut soit le modifier ou le supprimer.

J'arrive à créer mon tableau de modification par contre je n'arrive pas à envoyer en ajax l'artiste en question à mon php de modification pourtant je me suis fortement inspiré de ce qu'on a fait ensemble pour l'insertion de l'artiste.

Voilà mon script la partie de modification est en rouge

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
var artists = {
// tous les artistes
  lastAddedArtist: null,
// le div conteneur
  container: null,

// fonction d'init
	init: function() {
	var sbmButton = $("go");
	var frm = $("monForm");
	if(sbmButton && frm) {
	sbmButton.observe("click", artists.postArtist);
	}
    },

// pst un artiste en ajax au script php. l'url est l'action du formulaire
		postArtist: function(e) {
// on stop l'événement
		e.stop();
// nouvelle requete ajax
		new Ajax.Request($("monForm").action, {
		method: "post",
		parameters : $("monForm").serialize(true),
// on externalise le call back pour plus de lisibilité	
		onSuccess:artists.artist_callBack 
		});
		},
// call back retour ajax
		artist_callBack: function(response) {
// on evalue le JSON
		var lastArtist = response.responseText.evalJSON();
// si le resultat est de type string, c'est un message d'erreur
		if(Object.isString(lastArtist)) {
//on affiche une erreur
		artists.writeError(lastArtist);
		} 
		else {
// reinit du formulaire
		$("monForm").reset();
// on ajoute l'artiste à la liste de ceux déjà créés
// note : le json retourné est de la forme : {arts:[{art_id: "id", art_name: "name"}]}
// il pourait etre plus simple : {art_id: "id", art_name: "name"}
// la ligne suivante serait alors simplement :
		artists.lastAddedArtist = lastArtist.arts[0];
// on dessine les artistes
		artists.drawArtists();
		}
		},
// ecriture d'un message d'erreur
		writeError: function(message) {
// on obtient le conteneur et on l'update avec le message
		artists.getContainer().update(message);
		},
// dessine les artistes du tableau artists.allArtists
			drawArtists : function() {
// on construit la table
			var table = new Element('table');
// header
			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).insert(th1).insert(th2);
			table.insert(tr0);
// ... toujours donner les noms les plus significatifs possibles, ca aide toujours 6 mois après
			var artist = artists.lastAddedArtist;
			var tr1 = new Element('tr');
			var td1 = new Element('td').update(artist.art_id);
			var td2 = new Element('td').update(artist.art_name);
			var td3 = new Element('td');
			var imgModif = new Element('img', {src: 'modifier.png', alt: 'modifier', title: 'modifier'});
			var imgModifLink = new Element('a',{"class":'imgModif',id: 'modif', href:''});
			imgModifLink.observe("click", modifArtist.drawArtModifier);
			td3.insert(imgModifLink);
			imgModifLink.insert(imgModif);
			var td4 = new Element('td');
			var imgSuppr = new Element('img', {src: 'supprimer.png', alt: 'supprimer', title: 'supprimer'});
			var imgSupprLink = new Element('a',{"class":'imgSuppr', id: 'suppr', href:''});
			imgSupprLink.observe("click", supprArtist.drawArtSupprimer);
			td4.insert(imgSupprLink);
			imgSupprLink.insert(imgSuppr);
			tr1.insert(td1).insert(td2).insert(td3).insert(td4);
			table.insert(tr1);
// on obtient le conteneur
				var container = artists.getContainer();
// on enleve tout ce qu'il contient
				container.childElements().invoke("remove");
// on update à vide et on insere la table
				$('arts').innerHTML = "";
				container.update("").insert(table);
				},
// renvoie le conteneur
				getContainer : function() {
// si'il est null
				if(! artists.container) {
// on le crée en deux fois
				var block = new Element("div", {"class": "block"});
				$("Content").insert(block);
				artists.container = new Element("div", {"id": "arts"});
				block.insert(artists.container);
				}
// on le renvoie
				return artists.container;
				}

	}; 
var modifArtist = {
// artiste à modifier
	art_modif: null,
// le div conteneur
	container: null,
// on dessine l'artiste à modifier
	drawArtModifier : function(e){
// on stop l'évènement
		e.stop();
// on construit le formulaire
	var form = new Element('form', {"action": "modifArtist.php", "name": "frm_modification", "id": "frm_modification", "enctype": "multipart/form-data"});
// on récupère la valeur de l'artiste
	modifArtist.aEffectuer = artists.lastAddedArtist;
// on construit la table
	var table = new Element('table');
	var tr0 = new Element('tr');
	var th0 = new Element('th').update("Modifier Artiste");
	var td0 = new Element('td');
	var txt = new Element('input', {type: "text", "name": "art_name"});
	txt.value = modifArtist.aEffectuer.art_name;
	td0.insert(txt);
	tr0.insert(th0).insert(td0);
	table.insert(tr0);
	var tr1 = new Element('tr');
	var th1 = new Element('th');
	var td1 = new Element('td');
	var sbt = new Element('input', {type: "submit", "value": "Modifier", "id": "do"});
	sbt.observe("click", modifArtist.postArtistModif);
	td1.insert(sbt);
	var btn = new Element('input', {type: "button", "value": "Annuler"});
	btn.observe("click", function(){
	document.location.href="art_nat2.php";
	});
	td1.insert(btn);
	tr1.insert(th1).insert(td1);
	table.insert(tr1);
	form.insert(table);
// on obtient le conteneur
		var container = modifArtist.getContainer();
// on enleve tout ce qu'il contient
		container.childElements().invoke("remove");
// on update à vide et on insere la table
		$('arts').innerHTML = "";
		container.update("").insert(table);
	},
// renvoie le conteneur
			getContainer : function() {
// si'il est null
			if(! modifArtist.container) {
// on le crée en deux fois
			var block = new Element("div", {"class": "blockmodif"});
			$("Content").insert(block);
			modifArtist.container = new Element("div", {"id": "arts"});
			block.insert(modifArtist.container);
			}
// on le renvoie
			return modifArtist.container;
			}
// l'artiste à modifier
				artAModifier: null,
// pst un artiste en ajax au script php. l'url est l'action du formulaire
				postArtistModif: function(e){
// on stop l'événement
				e.stop();
// fonction d'init
				init: function(){
				var sbmModifButton = $("do");
				var frmModif = $("frm_modification");
				if(sbmModifButton && frmModif) {
				sbmModifButton.observe("click", modifArtist.postArtistModif);
				}
				},
// poste un artiste en ajax au script php. L'url est l'action du formulaire
				postArtistModif: function(e) {
// on stoppe l'évènement
				e.stop();
// nouvelle requête ajax
				new Ajax.Request($("frm_modification").action, {
				method: "post",
				parameters: $("frm_modification").serialize(true),
// on externalise le call back pour plus de lisibilité
				onSuccess: modifArtist.artModif_callBack
				});
				},
// call back retour ajax
				artModif_callBack: function(response) {
// on evalue le JSON
				var artModif = response.responseText.evalJSON();
// si le résultat est de type de string, c'est un message d'erreur
				if(Object.isString(artModif)) {
// on affiche une erreur
				modifArtist.writeError(artModif);
				}
				else {
// reinit du formulaire
				$("frm_modification").reset();
//on récupère l'artiste à modifier
				modifArtist.artAModifier = artists.lastArtist.arts[0];
// on dessine l'artiste à modifier
				modifArtist.drawArtistModif();
				}
				},
// ecriture d'un message d'erreur
				writeError: function(message) {
// on obtient le conteneur et on l'update avec le message
				modifArtist.getContainer().update(message);
				},
// On dessine le tableau de l'artiste à modifier
				drawArtistModif: function() {
// on construit la table
				var table = new Element('table');
// header
				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).insert(th1).insert(th2);
				table.insert(tr0);
				var artModification = modifArtist.artAModifier;
				var tr1 = new Element('tr');
				var td1 = new Element('td').update(artModification.art_id);
				var td2 = new Element('td').update(artModification.art_name);
				var td3 = new Element('td');
				var imgModif = new Element('img', {src: 'modifier.png', alt: 'modifier', title: 'modifier'});
				var imgModifLink = new Element('a',{"class":'imgModif',id: 'modif', href:''});
				imgModifLink.observe("click", modifArtist.drawArtModifier);
				td3.insert(imgModifLink);
				imgModifLink.insert(imgModif);
				var td4 = new Element('td');
				var imgSuppr = new Element('img', {src: 'supprimer.png', alt: 'supprimer', title: 'supprimer'});
				var imgSupprLink = new Element('a',{"class":'imgSuppr', id: 'suppr', href:''});
				imgSupprLink.observe("click", supprArtist.drawArtSupprimer);
				td4.insert(imgSupprLink);
				imgSupprLink.insert(imgSuppr);
				tr1.insert(td1).insert(td2).insert(td3).insert(td4);
				table.insert(tr1);
// on obtient le conteneur
					var container = modifArtist.getContainer();
// on enleve tout ce qu'il contient
					container.childElements().invoke("remove");
// on update à vide et on insère la table
					$('arts').innerHTML = "";
					container.update("").insert(table);
					},
// renvoie le conteneur
					getContainer: function() {
// s'il est null
					if(! modifArtist.container) {
// on le créé en deux fois
					var block = new Element("div", {"class": "blockmodif"});
					$("Content").insert(block);
					modifArtist.container = new Element("div", {"id": "arts"});
					block.insert(modifArtist.container);
					}
// on le renvoie
					return modifArtist.container;
					}
};


var supprArtist = {

// le div conteneur
	container: null,
	url: null,
// fonction d'init
	init: function(){
	supprArtist.url = "supprArtist.php";
	},
	
// on dessine l'artiste à supprimer
	drawArtSupprimer : function(e){
// on stop l'évènement
	e.stop();
// on récupère la valeur de l'artiste à modifier
	supprArtist.aEffectuer = artists.lastAddedArtist;
// on construit le span de modification
	message = "Vous êtes sur le point de supprimer: ";
	var spn = new Element('span',{"style":"font-weight: bold"}).update(message + supprArtist.aEffectuer.art_name);
// on construit le formulaire de suppression
	var frm_suppr = new Element('form', {"action": supprArtist.url, "name": "monForm", "id": "monForm", "enctype": "multipart/form-data"});
	var sbt_suppr = new Element('input', {type: "submit", "value": "Supprimer", "id": "go"});
	sbt_suppr.observe("click", function(){
	document.location.href="supprArtist.php";
	});
	frm_suppr.insert(sbt_suppr);
	var btn_suppr = new Element('input', {type: "button", "value": "Annuler"});
	btn_suppr.observe("click", function(){
	document.location.href="art_nat2.php";
	});
	frm_suppr.insert(btn_suppr);
// on obtient le conteneur
		var container = supprArtist.getContainer();
// on enleve tout ce qu'il contient
		container.childElements().invoke("remove");
// on update à vide et on insere la table
		$('arts').innerHTML = "";
		container.update("").insert(spn).insert(frm_suppr);
	},
// renvoie le conteneur
			getContainer : function() {
// si'il est null
			if(! modifArtist.container) {
// on le crée en deux fois
			var block_suppr = new Element("div", {"class": "blocksuppr"});
			$("Content").insert(block_suppr);
			supprArtist.container = new Element("div", {"id": "arts"});
			block_suppr.insert(supprArtist.container);
			}
// on le renvoie
			return supprArtist.container;
			}
	
		
};

document.observe('dom:loaded', function() {
artists.init(); 
modifArtist.init();
supprArtist.init();
});

Mon php de modification

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php include_once("connexion.php"); ?>
<?php
mysql_select_db($database, $base);
 
//si modification
 
$id = mysql_insert_id();
$query_modifArtist = sprintf("UPDATE artists SET art_name='$art_name' WHERE art_id = '$id'");
$artist = mysql_query($query_modifArtist, $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).'}';
?>

Merci d'avance

08/01/2010, 10h13
gwyohm

je ne vois pas ce qui ne va pas...

J'ai apporté des modifs au script qui ne solutionne toujours pas le problème.
Le message d'erreur que j'ai dans la console d'erreur est:
missing } after property list au niveau de la fontion d'int

Code:

1
2
3
4
5
6
7
init: function(){
				var sbmModifButton = $("do");
				var frmModif = $("frm_modification");
				if(sbmModifButton && frmModif) {
				sbmModifButton.observe("click", modifArtist.postArtistModif);
				}
				},

Je ne vois ce qui ne va pas.

Ici le script corrigé (partie modication uniquement)

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
var modifArtist = {
// artiste à modifier
	art_modif: null,
// le div conteneur
	container: null,
// on dessine l'artiste à modifier
	drawArtModifier : function(e){
// on stop l'évènement
		e.stop();
// on construit le formulaire
	var form = new Element('form', {"action": "modifArtist.php", "name": "frm_modification", "id": "frm_modification", "enctype": "multipart/form-data"});
// on récupère la valeur de l'artiste
	modifArtist.aEffectuer = artists.lastAddedArtist;
// on construit la table
	var table = new Element('table');
	var tr0 = new Element('tr');
	var th0 = new Element('th').update("Modifier Artiste");
	var td0 = new Element('td');
	var txt = new Element('input', {type: "text", "name": "art_name"});
	txt.value = modifArtist.aEffectuer.art_name;
	td0.insert(txt);
	tr0.insert(th0).insert(td0);
	table.insert(tr0);
	var tr1 = new Element('tr');
	var th1 = new Element('th');
	var td1 = new Element('td');
	var sbt = new Element('input', {type: "submit", "value": "Modifier", "id": "do"});
	sbt.observe("click", modifArtist.postArtistModif);
	td1.insert(sbt);
	var btn = new Element('input', {type: "button", "value": "Annuler"});
	btn.observe("click", function(){
	document.location.href="art_nat2.php";
	});
	td1.insert(btn);
	tr1.insert(th1).insert(td1);
	table.insert(tr1);
	form.insert(table);
// on obtient le conteneur
		var container = modifArtist.getContainer();
// on enleve tout ce qu'il contient
		container.childElements().invoke("remove");
// on update à vide et on insere la table
		$('arts').innerHTML = "";
		container.update("").insert(table);
	},
// renvoie le conteneur
			getContainer : function() {
// si'il est null
			if(! modifArtist.container) {
// on le crée en deux fois
			var block = new Element("div", {"class": "blockmodif"});
			$("Content").insert(block);
			modifArtist.container = new Element("div", {"id": "arts"});
			block.insert(modifArtist.container);
			}
// on le renvoie
			return modifArtist.container;
			}
// fonction d'init
				init: function(){
				var sbmModifButton = $("do");
				var frmModif = $("frm_modification");
				if(sbmModifButton && frmModif) {
				sbmModifButton.observe("click", modifArtist.postArtistModif);
				}
				},
// poste un artiste en ajax au script php. L'url est l'action du formulaire
				postArtistModif: function(e) {
// on stoppe l'évènement
				e.stop();
// nouvelle requête ajax
				new Ajax.Request($("frm_modification").action, {
				method: "post",
				parameters: $("frm_modification").serialize(true),
// on externalise le call back pour plus de lisibilité
				onSuccess: modifArtist.artModif_callBack
				});
				},
// call back retour ajax
				artModif_callBack: function(response) {
// on evalue le JSON
				var artModif = response.responseText.evalJSON();
// si le résultat est de type de string, c'est un message d'erreur
				if(Object.isString(artModif)) {
// on affiche une erreur
				modifArtist.writeError(artModif);
				}
				else {
// reinit du formulaire
				$("frm_modification").reset();
//on récupère l'artiste à modifier
				modifArtist.art_modif = artists.lastArtist.arts[0];
// on dessine l'artiste à modifier
				modifArtist.drawArtistModif();
				}
				},
// ecriture d'un message d'erreur
				writeError: function(message) {
// on obtient le conteneur et on l'update avec le message
				modifArtist.getContainer().update(message);
				},
// On dessine le tableau de l'artiste à modifier
				drawArtistModif: function() {
// on construit la table
				var table = new Element('table');
// header
				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).insert(th1).insert(th2);
				table.insert(tr0);
				var artModification = modifArtist.art_modif;
				var tr1 = new Element('tr');
				var td1 = new Element('td').update(artModification.art_id);
				var td2 = new Element('td').update(artModification.art_name);
				var td3 = new Element('td');
				var imgModif = new Element('img', {src: 'modifier.png', alt: 'modifier', title: 'modifier'});
				var imgModifLink = new Element('a',{"class":'imgModif',id: 'modif', href:''});
				imgModifLink.observe("click", modifArtist.drawArtModifier);
				td3.insert(imgModifLink);
				imgModifLink.insert(imgModif);
				var td4 = new Element('td');
				var imgSuppr = new Element('img', {src: 'supprimer.png', alt: 'supprimer', title: 'supprimer'});
				var imgSupprLink = new Element('a',{"class":'imgSuppr', id: 'suppr', href:''});
				imgSupprLink.observe("click", supprArtist.drawArtSupprimer);
				td4.insert(imgSupprLink);
				imgSupprLink.insert(imgSuppr);
				tr1.insert(td1).insert(td2).insert(td3).insert(td4);
				table.insert(tr1);
// on obtient le conteneur
					var container = modifArtist.getContainer();
// on enleve tout ce qu'il contient
					container.childElements().invoke("remove");
// on update à vide et on insère la table
					$('arts').innerHTML = "";
					container.update("").insert(table);
					},
// renvoie le conteneur
					getContainer: function() {
// s'il est null
					if(! modifArtist.container) {
// on le créé en deux fois
					var block = new Element("div", {"class": "blockmodif"});
					$("Content").insert(block);
					modifArtist.container = new Element("div", {"id": "arts"});
					block.insert(modifArtist.container);
					}
// on le renvoie
					return modifArtist.container;
					}
};