I’ve cloned the javascript SDK from github, and other than Firefox15.0 being unhappy, I’m

Question

0

Asked: June 11, 20262026-06-11T15:30:00+00:00 2026-06-11T15:30:00+00:00

I’ve cloned the javascript SDK from github, and other than Firefox15.0 being unhappy, I’m

0

I’ve cloned the javascript SDK from github, and other than Firefox15.0 being unhappy, I’m able to GET anything that I want. (Track lists, group lists).

I want to be able to add one of my tracks to one of my groups, (so far I’ve only got one of each, to keep testing simple.) The console lets me add (PUT https://api.soundcloud.com/groups/92779/contributions/58889291) and remove the same track from a group (DELETE with the same URI), but my not with the javascript SDK jQuery example. (I’m starting to think that it is jquery.sc.api.js, but as I’m not sure I’m asking for help.)

This is what I’ve hacked together so far: (well I did a lot more, but I’ve cut it down to highlight just this one example.)

index.html

<!DOCTYPE html>
<html>
  <head><meta charset="utf-8" />
<title>SC.js.test</title>
<script> var FireFox15_error = 'Error: ReferenceError: id is not defined \
Source File: jquery.tmpl.js Line: 126'
</script>
<style type="text/css">.hidden { visibility: hidden; }</style>
</head>
  <body>
    <div id="container">
    </div>
    <div id="tracks" class="hidden">
    <h2>Your tracks</h2>
      <ul id="track-list">
      </ul>
        The Add button seems 'to work' if the track is already in the group, but just redirects to the login page if it isn't (is this a sign that the token isn't being sent with the PUT ?)
    </div>
<!-- am I'm just old wanting to move these into the <head> ? -->
<script type="text/javascript" charset="utf-8" src="jquery_1.7.1_min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.tmpl.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.sc.api.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
    <!-- Templates -->
    <script id="track" type="text/html">
      <li data-track-id="${id}" id="${id}">${$i}) <a href="${permalink_url}">${title}</a>(${id})</li>
    </script>
<div id="debug" class="hidden">
    <h3>Requests/Questions</h3>
<ol>
<li>api.put('/me', { "description": 'Guess who is using the new API function?' }); //please add this</li>
<li> why does sc have a different string than the track_id for removing tracks from a group?  </li>
</ol>
</div>
</body></html>

main.js

(function($) {
   var soundCloudApiKey = 'should_be_able_to_create_a_key_for_(locked_to)_each_user';
   var user_id = '';
  var api = $.sc.api(soundCloudApiKey, {
    onAuthSuccess: function(user, container) {
        user_id = user.id;
      $('<span class="username">Logged in as: <strong>' + user.username + '</strong> (' + user_id + ')</a>').prependTo(container);
    }
  });
  $(document).bind($.sc.api.events.AuthSuccess, function(event) {
  $(this).click(function(data) {
    data.preventDefault();
    var Sender = window.event.srcElement;
    if(Sender.id == 'add_track_submit'){
        var group_id = $('#group_id').val();
        var track_id = $('#track_id').val();
        alert('TRYING to add track ' + track_id + ' to group ' + group_id);
        //api.put('/groups/' + group_id + '/contributions/' + track_id); // http://developers.soundcloud.com/docs/api/guide#contributing-group
        api.put('/groups/' + group_id + '/contributions/' + track_id, function(reply, e){ //trying to get some feedback on why this does not work
                    // It seems to be using a GET rather than a PUT or POST
        //api.post('/groups/' + group_id + '/contributions/' + track_id, function(reply, e){ //also does not seem to work
            if(e){ console.log('err:' + e); }
            console.log('track add reply' + reply);
            alert('track ' + track_id + ' added to group ' + group_id);
        });
    }
   return false;
  });
   api.get('/me/tracks', function(data) {
      // you can use new jQuery templating for generating the track list
      $('#track').render(data).appendTo("#track-list");
      //groovy, if Firefox15.0 did not hate it, (works in Google Chrome 18.0.1025.162/JavaScript V8 3.8.9.18)
      $.map( data, function(track, i){
            my_group_id = 92779; //dirty hack while I try to get this working with just one track and one group
            var add_button = '<span id="add_button"><form id="add_track"><input id="group_id" type="hidden" name="group_id" value="' + my_group_id + '" /> \
<input type="hidden" id="track_id" name="track_id" value="' + track.id + '" /> \
<input type="submit" id="add_track_submit" name="add" value="Add ' + track.title + ' to group ' + my_group_id + '" /></form></span>';
                                $('#track-list>#' + track.id).append(add_button);
    });
    $('div').removeAttr("class", "hidden");
  });
});
})(jQuery);