Like I said this was example code... Allot of things are missing, and incorrect. I was simply to show the basic backbones of what I'm trying to accomplish. Also the while loop I forgot I replaced with the if statement for specific page rendering problems. And basically, the $.attr() function is supposed to output an img url from a MySQL db.
Problem Outputting A While Loop into a jQuery Statement
It's still neither clear what you want, nor what the problem and/or error is. IF you want to create an image element for which the src attribute comes from a db or similar, all you need to do is
printf('<img src="%s" alt="" />', $row['img_url']);
So in my database I have a field named Artist_IMG. This field points to an img file location on my filesystem. What I'm trying to do with my script is call "$row['Artist_IMG'];" inside of a JavaScript statement. I've built a script which acts in similarity, and it works when your outputting one row from the database. But when I perform a while loop it will break. What I'm doing with my jQuery code is when a link is clicked it will load the next row (which contains the next img url) in the database. And come to think of it I might need to output the url into an html img element.. lol
Well, if you have working code without while loop, post it so we can see what it does. And then also post the code with the while loop along with an error message you get / other explanation of what isn't working.
<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<?php
include("processing/config.php");
$song_query = mysql_query("SELECT id, url, songname, artists, song_desc FROM music LIMIT 5");
if (!$song_query) {
exit('Error Fetching Song Details: ' . mysql_error() . '</p>');
}
$url = $song_query['url'];
?>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
.song {
font-size: large;
color: black;
}
.jp-play {
font-size: medium;
color: #3F4848;
text-decoration: none;
}
.jp-pause {
font-size: medium;
color: #3F4848;
text-decoration: none;
}
</style>
</head>
<?php
while($row = mysql_fetch_array($song_query)) {
echo "<span class='song'>$row[songname]<span class='song'>";
echo "<span class='song'> - <span class='style12'>";
echo "<span class='song'>$row[artists]<span class='song'>";
echo "<div id=\"jquery_jplayer_1\"></div>";
echo "<div id=\"jp_interface_1\">";
echo "<a href=\"#\" class=\"jp-play\">Play</a>";
echo "<a href=\"#\" class=\"jp-pause\">Pause</a> <br />";
?>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "<?php echo $row['url']; ?>",
});
},
swfPath: "/js",
supplied: "mp3"
});
});
</script>
<?php } ?>
</div>
</body>
</html>
When I have one row in the database, it will play the song just fine. But when I add 2 or more the outputted songs will all play the same song when I press play. They all play the first song in the row.
you are outputting the jquery player and that piece of jquery javascript multiple times - each with the same id, so all your clicks do the same thing
on any page all ids must be unique, so you need to use a method to change the ids and also the referencing script.
maybe something like :
add this after the while statement:
$countnum++;
change this line :
echo "<div id='jquery_jplayer_".$countnum."'></div>";
(I messed around with your quote marks also)
and same for any other divs using an id
and in your js:
$("#jquery_jplayer_<?php echo $countnum ?>").jPlayer({
Thanks man! Now it plays all of the mp3's.
Notice: Undefined variable: countnum in C:\Web Server\htdocs\Kevin's Site\music.php on line 34
I'm also getting this error.
you need to define $countnum, so you could just do
$countnum=0 ;
before you run the while loop
Dang.... It's still doing it.
doing what?
The songs are stiill playing all at once. Lol I'm about ready to just give up.
Assuming you are still using the original piece of code, except with the added use of a counter variable, you are attaching several document.ready event handlers, and each of those is initializing a player each. Is it possible to set all but one to NOT autoplay? Or is it perhaps possible to create one player, but adding an array of media files rather than just one file, thus creating one player with a play list?
I think problem is that this line:
$(this).jPlayer
is referencing all the players on your page
but there should be a better way to do this
you should ideally only have one instance of the jquery script and then depending on which button is clicked the script knows which file to play, but that's going to mean adjusting your javascript