CODEWITHSUNDEEP
javascriptjquerystorage
mheavers
mheavers

Reputation: 30198

JQuery - Most elegant way for storing data to be used by javascript

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

Answers (4)

MJJames
MJJames

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

Mark Eirich
Mark Eirich

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

Neall
Neall

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

amitchd
amitchd

Reputation: 975

Or you could send them using a json string and then converted to an object.

Upvotes: 1

Related Questions