débutant, construire une liste de sélection à partir des données retournées par $.getJSON()

**nkordiko** · 09/04/2010, 10h18

Bonjour,
Je tente de réaliser mon premier select alimenté via ma base de données mysql et ajax.

Je souhaite avoir dans mon select tous les artistes de ma base de données.
Les options de ce même select ayant pour value l'id (art_id) de l'artiste et le text des options le nom de l'artiste (art_name).

Le problème que j'ai c'est mon select affiche undefined.

Voici mon js et mon script php récupérant les artistes afin que vous puissiez m'aider à corriger mon problème.

Merci d'avance

Le 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
$(document).ready(function(){
	populateArtistSelect();
});
 
function populateArtistSelect() {
	$.getJSON('getArtists.php', function (data) {
		var select = $('#artists');
		var options = select.attr('options');
		$('option', select).remove();
 
		$.each(data, function(index, array) {
			options[options.length] = new Option(array['artists']);
			options.value = data.art_id;
			options.text = data.art_name;
		});
	});
}

Le Php récupérant les artistes dans la base de données

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
 
<?php include_once("connexion.php"); ?>
<?php
mysql_select_db($database, $base);
$query_artists = "SELECT * FROM artists ORDER BY art_name ASC";
$artists = mysql_query($query_artists, $base) or die(mysql_error());
$row_artists = mysql_fetch_assoc($artists);
$result = array();
?>
 
<?php
do {  
$result[] = $row_artists;
} while ($row_artists = mysql_fetch_object($artists));
echo '{"artists":'.json_encode($result).'}';
?>

**danielhagnoul** · 12/04/2010, 00h47

Bonsoir.

Pour PHP et MySQL vous n'êtes pas sur le bon forum.

Sans votre code il m'est impossible de connaître le contenu de l'élément d'id « artists», mais :

Ici vous sélectionnez le contenu de l'attribut options avec s !
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
select.attr('options');
```
Ici vous détruisez irrémédiablement l'attribut option sans s !
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
$('option', select).remove();
```
Si le but est de supprimer le contenu d'un attribut, alors :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
$(this).attr("monAttr", "");
```

Avec jQuery 1.4.2, si votre code JSON n'est pas bien formé il n'est pas chargé. Voir : http://api.jquery.com/jQuery.getJSON/

**nkordiko** · 13/04/2010, 22h03

Bonsoir toutes mes excuses, je pensais être au bon endroit vu que je souhaite alimenter mon select via jquery.

Cependant, j'ai apporté des modifications suites à vos remarques.

Voilà maintenant mon Js commenté pour que vous puissez comprendre ce que je tente de faire.

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
$(document).ready(function(){
	populateArtistSelect();
});
 
function populateArtistSelect() {
	$.getJSON('getArtists.php', function (data) {
		var select = $('#artists'); // relation avec mon select créé en dur
		var option = select.attr('option'); // option attribut de mon select
 
		$.each(data, function(index, array) { // pour chaque artiste retourné
			option[option.length] = new option(array['artists']);// une nouvelle option est créé
			option.value = data.art_id; //option a pour id la valeur art_id récupéré par le getArtists.php
			option.text = data.art_name;// option a pour text la valeur art_name récupéré
		});
	});
}

Je me suis basé sur ce 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
function populateFruitVariety() {
 
    $.getJSON('/fruit-varities.php', {fruitName:$('#fruitName').val()}, function(data) {
 
        var select = $('#fruitVariety');
        var options = select.attr('options');
        $('option', select).remove();
 
        $.each(data, function(index, array) {// je ne comprends pas à quoi se réfère index
            options[options.length] = new Option(array['variety']);
        });
 
    });
 
}
 
$(document).ready(function() {
 
	populateFruitVariety();
	$('#fruitName').change(function() {
		populateFruitVariety();
	});
 
});

Vous pouvez retrouvez le tutorial dans sa globalité ici
http://www.electrictoolbox.com/json-...ery-php-mysql/

Voici mon script php qui va récupère les infos dans ma base de données

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
 
<?php include_once("connexion.php"); ?>
<?php
mysql_select_db($database, $base);
$query_artists = "SELECT * FROM artists ORDER BY art_name ASC";
$artists = mysql_query($query_artists, $base) or die(mysql_error());
$row_artists = mysql_fetch_assoc($artists);
$result = array();
?>
 
<?php
do {  
$result[] = $row_artists;
} while ($row_artists = mysql_fetch_object($artists));
echo '{"artists":'.json_encode($result).'}';
?>

Pour finir mon HTML

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
<form id="formSingles" action="newSinglesTest.php" method="post">
				<table>
					<tr>
						<th>Selectionnez Votre Artiste:</th>
						<td><select name="artists" id="artists"></select></td>
					</tr>
					<tr>
						<th>Entrez Votre Single:</th>
						<td><input type="text" name="single" value="" /></td>
					</tr>
					<tr>
						<th>Pochette Single</th>
						<td><input type="file" name="single_cover" size="50" /></td>
					</tr>
					<tr>
						<th>Année de Sortie</th>
						<td><input type="text" name="single_release_date" /></td>
					</tr>
					<tr>
						<th></th>
						<td><input class="submitButton" type="submit" value="Valider" /></td>
					</tr>
	        	</table>
	        </form>

Merci d'avance pour votre compréhension

**danielhagnoul** · 14/04/2010, 23h41

Bonsoir.

Exemple :

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
<script>
	$(function(){
		/*
		 * Je souhaite avoir dans mon select tous les artistes de ma base de données.
		 * Les options de ce même select ayant pour value l'id (art_id) de l'artiste
		 * et le text des options le nom de l'artiste (art_name).
		 */
		var data = [
			{
				"art_id":"artiste_1",
				"art_name":"artiste_1_nom"
			},
			{
				"art_id":"artiste_2",
				"art_name":"artiste_2_nom"
			}
		];
 
		// Firebug
		//console.log(data);
 
		var select = $('#artists');
 
		// attribut option du select ! Cela n'existe pas !
		//var option = select.attr('option');
 
		var option = $("<option/>");
		var optionClone = null;
 
		// Firebug
		//console.log(select, option);
 
		$.each(data, function(index, array) {
			// Firebug
			//console.log(index, array, array.art_id, array.art_name);
 
			optionClone = option.clone(true);
			optionClone.val(array.art_id);
			optionClone.text(array.art_name);
			select.append(optionClone);				
		});
	});
</script>

**nkordiko** · 20/04/2010, 22h39

Au risque de paraitre idiot, je n'y arrive toujours pas.
J'ai voulu mixer l'exemple de danielhagnoul et ce que j'avais parce qu'au niveau de l'exemple de danielhagnoul je voyais pas comment il fait référence au fichier getArtists.php qui récupère tous mes artites. Et si j'ai bien compris sa structure son code est à inséré dans la page même du formulaire alors que moi j'ai des js externes.

Voilà ce que je fais

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
$(document).ready(function(){
	populateArtistSelect();
});
 
function populateArtistSelect() { // je comprends pas l'utilité de cette variable
	var data = [
			{
				"art_id":"artiste_1",
				"art_name":"artiste_1_nom"
			},
			{
				"art_id":"artiste_2",
				"art_name":"artiste_2_nom"
			}
		];
 
	$.getJSON('getArtists.php', function (data) {
		var select = $('#artists'); // relation avec mon select créé en dur
		var option = $("<option/>"); // option attribut de mon select
		var optionClone = null;
 
		 //Firebug
		//console.log(select, option);
 
		$.each(data, function(index, array) { // pour chaque artiste retourné
			//Firebug
			//console.log(index, array, array.art_id, array.art_name);
 
			optionClone = option.clone(true);
			optionClone.val(array.art_id);
			optionClone.text(array.art_name);
			select.append(optionClone);
 
		});
	});
}

Je vous demande de faire preuve d'indulgence.
Cordialement

**danielhagnoul** · 21/04/2010, 01h29

Bonsoir.

Vous devez bien comprendre qu'il m'est impossible d'avoir accès à votre fichier getArtists.php et à votre base de données !

Pour disposer d'un code de test, je dois donc me construire un fichier JSON, que j'affecte à la variable data !

Vous ne devez donc bien entendu pas tenir compte du contenu de la variable data de mon code de test !

**nkordiko** · 21/04/2010, 23h13

Envoyé par danielhagnoul

Bonsoir.

Vous devez bien comprendre qu'il m'est impossible d'avoir accès à votre fichier getArtists.php et à votre base de données !

Pour disposer d'un code de test, je dois donc me construire un fichier JSON, que j'affecte à la variable data !

Vous ne devez donc bien entendu pas tenir compte du contenu de la variable data de mon code de test !

Bonjour,

je comprends bien que vous n'avez pas accès à mon fichier getArtist.php ni à ma base de données.

Dans mon cas, je n'ai pas besoin de votre variable data vu que la fonction getJSON s'en charge

Si mon raisonnement est bon en faisant cela ça devrait fonctionner

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
$(document).ready(function(){
	populateArtistSelect();
});
 
function populateArtistSelect() {
	$.getJSON('getArtists.php', function (data) {
		var select = $('#artists'); // relation avec mon select créé en dur
		var option = $("<option/>"); // option attribut de mon select
		var optionClone = null;
 
		 //Firebug
		//console.log(select, option);
 
		$.each(data, function(index, array) { // pour chaque artiste retourné
			//Firebug
			//console.log(index, array, array.art_id, array.art_name);
 
			optionClone = option.clone(true);
			optionClone.val(array.art_id);
			optionClone.text(array.art_name);
			select.append(optionClone);
 
		});
	});
}

Si vous pouvez me dire directement sur ce code ce qui ne va pas. Je sais je suis lourd, je ne plaisantais pas quand je disais que je suis débutant.

Merci encore

**danielhagnoul** · 22/04/2010, 00h45

Bonsoir.

Oui, et on peut enlever tous les commentaires.

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
function populateArtistSelect(){
	$.getJSON("getArtists.php", function(data){
		var select = $("#artists");
		var option = $("<option/>");
		var optionClone = null;
 
		$.each(data, function(index, array) {			
			optionClone = option.clone(true);
			optionClone.val(array.art_id);
			optionClone.text(array.art_name);
			select.append(optionClone);				
		});
	});
}
 
$(document).ready(function(){
	populateArtistSelect();
});

**nkordiko** · 03/05/2010, 22h01

Bonsoir,

j'ai tout tenté et ça ne passe toujours pas.
Danielhagnoul je peux peut être te donner accès à ma base de données pour que tu testes en direct

**danielhagnoul** · 06/05/2010, 23h37

Bonsoir.

Désolé pour le retard.

Pour l'accès à la base de données, ce n'est pas une bonne idée car je suis débutant en PHP et en SQL.

**nkordiko** · 10/05/2010, 21h59

Bonsoir, y'a pas de problème pour le retard. Je te remercie de ton aide. Je vais essayer de trouver la solution. Si je trouve te dirais ce qui n'allait pas.
Merci encore

Envoyé par danielhagnoul

Bonsoir.

Désolé pour le retard.

Pour l'accès à la base de données, ce n'est pas une bonne idée car je suis débutant en PHP et en SQL.

débutant, construire une liste de sélection à partir des données retournées par $.getJSON()

jQuery

Discussions similaires

Partager

Partager