11548 sujets

JavaScript, DOM et API Web HTML5

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

Après m'être documenté j'ai pensé que je pouvais faire cela avec la fonction $.getJson.
Le problème c'est qu'il ne se passe rien au niveau de mon select, j'ai strictement rien même pas une erreur au niveau de firebug.

Je souhaite que les options de mon select aient pour value l'id (art_id) de l'artiste et le text des options le nom de l'artiste (art_name) que je récupère dans ma base de données.

Mon script php me permettant de récupérer les artistes fonctionne bien je vois bien tous les artistes de base de données dans firebug.

<?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).'}';
?>
 


Je pense que le problème se situe au niveau de mon js que voici

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


Pour finir mon HTML

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


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

$.getJSON("getArtists.php", function(data){ 
        var select = $("#artists"); 
         
        $.each(data, function(index, array) {  
             select.append('<option value="' + array.art_id +'">' + array.art_name + '</option>');                 
        }); 
});


Fait de tête donc il y a peut être un raté.
Ce bout de code remplace ton ancien.

Par contre je vois pas bien l'intérêt de remplir un select avec un js quand le dom est ready.
Autant le faire en php.