0

I'm using wp_localize_script to pass multiple arrays of data into a javascript file. To differentiate between the different arrays (and prevent overwriting), they are labelled relative to the post id from which they originated.

The objects I need to use in the js file are like this, for example:

playlist150.tracks
playlist257.tracks

I have set DOM elements to match the object name, for example:

<div id="playlist150" class="playlist-item"></div>

<div id="playlist257" class="playlist-item"></div>

Within the javascript file, I have the following:

jQuery(document).ready(function($) {

  $('.playlist-item').each(function() {

    var playerId = $(this).attr('id');

    var music = new jPlayerPlaylist({
      playerId.tracks
    });      

  });

});

The problem I am having is that whilst the value of playerId is equal to the name of the objects passed into the javascript file (in this case, playlist150 or playlist257), it does not work as a substitute.

I must be missing some basic concept of javascript objects here, please help!

3

In your code playerId is a string. So playerId.tracks can't work.

So you can create a multidimensional array with wp_localize_script (WP 3.3+):

$playlists = array(
  'playlist150' => array( 'tracks'=> array('track1', 'track2') ),
  'playlist257' => array( 'tracks'=> array('track3', 'track4') )
);
wp_localize_script( 'some_handle', 'allPlaylists', $playlists );

Then in the js use the bracket notation to retrieve the correct array:

jQuery(document).ready(function($) {
  $('.playlist-item').each(function() {
      var tracks = allPlaylists[playerId].tracks // this is an array     
  });
});

The previous was a generic information. For what I understand you want to use jPlayerPlaylist object.

What I read in that documantations is it need an instantiation like:

// This is pseudo-code.
var myPlaylist = new jPlayerPlaylist({cssSelector}, [playlist], {options});

Where playlist is an array of objects each one is something like:

{
  title:"The Title",
  artist:"The Artist",
  free: true,
  mp3:"http://www.example.com/songs/track1.mp3",
}

and the css selector is an object with two properties, and must me related to div in which the player have to be shown.

Now, if your html containers are:

<div id="playlist150" class="playlist-item"></div>
<div id="playlist257" class="playlist-item"></div>

in a plugin or functions.php you have to create the right arrays, enqueue the scripts and pass the data in a way similar to this:

add_action('wp_enqueue_scripts', 'mytracklists');

function mytracklists() { 
  $playlists = array(
    'playlist150' => array(
      'tracks' => array(
        array(
          'title' => "Track 1",
          'artist' => "One Artist",
          'free' => true,
          'mp3' => "http://www.example.com/songs/track1.mp3",
        ),
        array(
          'title' => "Track 2",
          'artist' => "One Artist",
          'free' => true,
          'mp3' => "http://www.example.com/songs/track2.mp3",
        )
      )
    ),
    'playlist257' => array(
      'tracks' => array(
        array(
          'title' => "Track 3",
          'artist' => "Second Artist",
          'free' => true,
          'mp3' => "http://www.example.com/songs/track3.mp3",
        ),
        array(
          'title' => "Track 4",
          'artist' => "Second Artist",
          'free' => true,
          'mp3' => "http://www.example.com/songs/track4.mp3",
        )
      )
    ),
  );
  wp_register_script('jplayer', get_template_directori_uri() . '/js/jplayer/jquery.jplayer.min.js', array('jquery'));
  wp_register_script('jplayerplaylist', get_template_directori_uri() . '/js/jplayer/add-on/jplayer.playlist.min.js', array('jplayer'));
  wp_enqueue_script('myplaylists', get_template_directori_uri() . '/js//myplaylists.js', array('jplayerplaylist'));
  wp_localize_script( 'myplaylists', 'allPlaylists', $playlists );
}

You see I enqueued jplayer, jplayerplaylist and a custom script called myplaylists that should contain something like:

jQuery(document).ready(function($) {
  // options, valid for all players 
  var my_options = {
    playlistOptions: {
      autoPlay: false,
      loopOnPrevious: false,
      shuffleOnLoop: true,
      enableRemoveControls: false,
      displayTime: 'slow',
      addTime: 'fast',
      removeTime: 'fast',
      shuffleTime: 'slow'
    },
    supplied: "mp3"
  }
  // settings for each player
  $('.playlist-item').each(function() { 
    var cssSelector = {
      jPlayer: '#player_' + $(this).attr('id'),
      cssSelectorAncestor: '#' + $(this).attr('id')
    }
    var playerId = $(this).attr('id');
    // create and populate the playlist array
    // taking data from objet passed via wp_localize_script
    var playlist = new Array();
    $.each( allPlaylists[playerId].tracks, function(i, value) {
      playlist.push(value);
    })
    // instanciate jPlayerPlaylist
    var myPlayer = new jPlayerPlaylist( cssSelector, playlist, my_options );
  });
});

So iterating the div the script create the cssSelector object and create an array of objects containing the tracks. After that use these variable (and the options object) to instanciate the jPlayerPlaylist object.

  • Thanks for the clarification on why playerId.tracks doesn't work. I will try to use your solution, although it may not be possible to do it quite like that in my particular situation. – George Sep 8 '13 at 20:47
  • The playlist arrays are created within a shortcode function (one playlist per shortcode). Therefore when wp_localize_script is called within the shortcode, it overwrites the allPlaylists object from any previous shortcodes. That's why I was passing seperate multi-dimensionals arrays as objects with id-specific names. Only problem is then retrieving those objects with the javascript file. Any ideas? – George Sep 8 '13 at 21:06
  • @George see the edit. – gmazzap Sep 8 '13 at 21:58
  • Thanks again G.M. It hasn't solved my particular problem completely, but definitely a big step in the right direction, so I've marked it as the answer. The other part of my problem - how to create the array correctly from multiple shortcodes - warrants another question really. Cheers! – George Sep 9 '13 at 13:10
  • You're welcome @George. I guessed that this not solved your problem, but without seeing yor code I was not able to do more. An then I think you are right, that's another question. – gmazzap Sep 9 '13 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.