Question

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?

Answer 1

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>