JSON and Tumblr

Question

Okay, so I'm trying to create a "Order Posts by Type" using jQuery JSON to get the data... All the post types works in Chrome, Safari, FF. But in IE, video / audio posts will not display (perhaps something to do with the embedding?) when I filter through the posts using JSON.

Does anyone have a clue what's going on?! Here's the code:

<script>
  $('#order_by ul li').find('a').click(function() {
  var postType = this.className;
  var count = 0;
  byCategory(postType);
  return false;

  function byCategory(postType, callback) {
    $.getJSON('{URL}/api/read/json?type=' + postType + '&callback=?', function(data) {
    var article = [];
     $.each(data.posts, function(i, item) {
     // i = index
     // item = data for a particular post
     switch(item.type) {
     case 'photo':
     article[i] = '<div class="post_wrap"><div class="photo"><a href="' 
         + item.url 
       + '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/0yplawef6/link_photo.png" /></a><a href="' 
       + item.url 
       + '"><img src="' 
       + item['photo-url-1280'] 
       + '"alt="image" /></a></div></div>';
     count = 1;
     break;
     case 'video':
     article[i] = '<div class="post_wrap"><div class="video"><a href="' 
       + item.url 
       + '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/FWAlawenw/link_video.png" /></a><span><br />' 
       + item['video-player'] 
       + '</span><div class="video_desc">' 
       + item['video-caption'] 
       + '</div></div></div>';
     count = 1;
     console.log(article[i]);
     break;
     case 'audio':
     article[i] = '<div class="post_wrap"><div class="audio"><a href="' 
         + item.url 
       + '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/e8Zlawemi/link_audio.png" /></a><h2 class="heading"><a href="' 
       + item.url + '">' 
       + item['id3-artist'] 
       +' - ' 
       + item['id3-title'] 
       + '</a></h2><div class="player"><br />' 
       + item['audio-player']
       + '<p>' + item['id3-artist'] + ' - ' + item['id3-title'] + '</p>'
       + '<p>' + item['audio-plays'] + ' plays</p>' 
       + '</div><div class="audio_desc">' 
       + item['audio-caption'] 
       + '</div><div class="clear"></div></div></div>';
     count = 1;
     break;
     case 'regular':
     article[i] = '<div class="post_wrap"><div class="regular"><a href="' 
         + item.url 
       + '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/LH3laweb7/link_text.png" /></a><h2 class="heading"><a href="' 
       + item.url 
       + '">' + item['regular-title']
       + '</a><div class="description_container">'
       + item['regular-body'] 
       + '</div></div></div>';
     count = 1;
     break;
     case 'quote':
     article[i] = '<div class="post_wrap"><div class="quote"><a href="' 
         + item.url 
       + '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/1Lwlaweh7/link_quote.png" /></a><blockquote>' 
       + item['quote-text']
       + '</blockquote><cite>- '
       + item['quote-source'] 
       + '</cite></div></div>';
     count = 1;
     break;
     case 'conversation':
     article[i] = '<div class="post_wrap"><div class="chat"><a href="' 
         + item.url 
       + '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/NZ9lawekt/link_chat.png" /></a><h2 class="heading"><a href="' 
       + item.url 
       + '">' + item['conversation-title']
       + '</a></h2></div></div>';
     count = 1;
     break;
     case 'link':
     article[i] = '<div class="post_wrap"><div class="link"><a href="' 
         + item.url 
       + '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/G1zlaweir/link_link.png" /></a><h2 class="heading"><a href="' 
       + item['link-url'] 
       + '">' + item['link-text']
       + '</a></h2></div></div>';
     count = 1;
     break;
     default:
     alert('No Entries Found.');
     };
     }) // end each

     if (!(count == 0)) {
     $('#main_content')
      .fadeOut('fast')
      .html('<div class="post_wrap"><div class="regular"><h2 class="heading">Displaying ' 
      + postType 
      + ' Posts Only</h2></div></div>'
      + '<div class="post_wrap"' 
      + article.join('') 
      + '</div>'
      ).fadeIn('fast')

              $('div.video').each(function() {
       var video_container_height = $(this).innerHeight();
          video_container_height = (video_container_height - 60)

      $(this).children('div.video_desc').css(
        {'position': 'absolute',
        'top': '40px',
        'right': '20px',
        'width': '380px',
        'height': video_container_height}
       ).jScrollPane({
        verticalGutter: 25
       });
      }); 







     $('div.audio div.audio_desc').each(function() {
        var container_width = $('div.audio').outerWidth(true);
      var player_width = $('div.audio div.player').outerWidth(true);
      var audio_desc_width = (container_width - player_width);

      $(this).css(
       {'position': 'absolute',
       'top': '75px',
       'right': '20px',
       'height': '125px',
       'width': (audio_desc_width - 50 /*The size of the left and right margin*/)})
      .jScrollPane({
       verticalGutter: 25
      });
     }); 


     } else {

     $('#main_content')
      .fadeOut('fast')
      .html('<div class="post_wrap"><div class="regular"><h2 class="heading">Whoops! There are no ' 
      + postType 
      + ' Posts To Display</h2></div></div>'
      ).fadeIn('fast')
     } // end IF

   }); // end getJSON
   }; // end byCategory
    });  // end click   


  </script>

To check out the live version, head on over to http://minimus.tumblr.com

Answer 1

I think you problem is caused by a tiny error at line 1690:

$('#main_content')
    .fadeOut('fast')
    .html('<div class="post_wrap"><div class="regular"><h2 class="heading">Displaying '
        + postType
        + ' Posts Only</h2></div></div>'
        + '<div class="post_wrap"' // line 1690: you are missing a '>'
        + article.join('')
        + '</div>'
    ).fadeIn('fast')