Reputation: 30198
I was just curious what's the best way to store data for use by JQuery - I'm setting up a basic mp3 player, and the title, artist, track and file name all need be held somewhere to be retrieved by JQuery upon clicking in the radio interface. I was thinking of storying them as simple attributes within an tag, like this:
<a href="{song_file}" data-title="{song_title}" data-artist="{song_artist}" data-album="{song_album}">
but I'm guessing that might be considered bad form. I know I could bring them in via XML, but I'd rather not have to retrieve from some external document. Anybody have a good solution?
Upvotes: 1
Views: 299
Reputation: 745
data- notion is acceptable and is the preferred way especially for HTML5 of attaching data to markup. However are the Anchors actually being used for anything else? I would be simply having the data output as JSON something along the lines of
var MP3TrackData = [{TrackName ='something'}];
Upvotes: 1
Reputation: 10114
I believe what you are looking for is jQuery's .data()
: http://api.jquery.com/jQuery.data/
Here is one possible way it can be done:
<div id="songs"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
jQuery(function() {
// The following array can be trivially generated directly from your data,
// by PHP's json_encode(), or your language's equivalent:
var songs = [
{
file: '/path/to/song.mp3',
title: 'A Day in the Life',
artist: 'The Beatles',
album: 'Sgt. Pepper\'s Lonely Hearts Club Band',
}
// ...
];
var wrap = jQuery('#songs');
for (var i=0, ii=songs.length; i<ii; i++) {
jQuery('<a></a>')
.text(songs[i].title)
.attr('href', songs[i].file)
.data('song-data', songs[i])
.click(click_handler)
.appendTo(wrap);
}
// then, you can retrieve the data like this:
function click_handler() {
var data = jQuery(this).data('song-data');
alert('Album was: '+data.album);
return false;
}
});
</script>
Upvotes: 2
Reputation: 27164
I think the use of data-*
attributes is appropriate.
Alternately you can put the title, artist and album as spans within the anchor tag. Something like this:
<a href="/url/of/purple-rain.mp3">
<span class="title">Purple Rain</span>
<span class="artist">Prince</span>
<span class="album">Purple Rain</span>
</a>
And then style those spans to look the way you like - maybe even hiding some of the data.
Upvotes: 1
Reputation: 975
Or you could send them using a json string and then converted to an object.
Upvotes: 1