Having trouble paginating external Tumblr JSON

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

30 Replies - 2206 Views - Last Post: 08 July 2013 - 11:19 AM

#16 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: Having trouble paginating external Tumblr JSON

Posted 05 July 2013 - 07:34 PM

For the forward you will want the start to be one more than the last post.
For the previous you will want the start to be the beginning minus 6 if it is not less than zero.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#17 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Having trouble paginating external Tumblr JSON

Posted 05 July 2013 - 09:33 PM

View Postlaytonsdad, on 05 July 2013 - 07:34 PM, said:

For the forward you will want the start to be one more than the last post.
For the previous you will want the start to be the beginning minus 6 if it is not less than zero.

Hope that helps.


Would something along the lines of this work?

var next = function() {
            if (tumblrPaginate < numberOfPages){
                show(tumblrPaginate + 1);
            }
        };
        
        var previous = function() {
            if (tumblrPaginate > 1) {
                show(tumblrPaginate - 1);
            }



I don't need a Page 1, 2, 3, 4, 5, etc. A previous and next page button will do the same job. I can learn to implement the numerical page link at a later time.
Was This Post Helpful? 0
  • +
  • -

#18 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Having trouble paginating external Tumblr JSON

Posted 06 July 2013 - 12:53 PM

I got something working, sort of.

New code:

var tumblr_api_read = null; // this is important do not remove
var tumblrPaginate = 0; // **TODO** make loop to increment each for pagination feature
var tumblrpostCount = 5; // set the post count number, max is 50 for API v1

$(document).ready(function() {
        // setup our namespace
        $.tumblr = {};
        // modify these
        $.tumblr.url = 'http://wisdmlab.tumblr.com/api/read/json?callback=?&num=' + tumblrpostCount +'&start=' + tumblrPaginate +''; // set to display 7 posts. off set syntax is start=[postnumtobeginat]
        $.tumblr.numPostsToDisplay = 50;
        $.tumblr.postMaxDescriptionLength = 500; // set to -1 to turn off jquery.expander
        $.tumblr.videoWidth='200'; // youtube default 400
        $.tumblr.videoHeight='163'; // youtube default 325
        // do not modify these unless you are hardcore
        $.tumblr.imagePath = '..//testscripts/tumblr-jquery-master/img/';
        $.tumblr.postCount = 0;

        $('#next').on("click",function (e) {
          e.preventDefault();
           tumblrPaginate += 5;
            reloadTumblr();
        });
        $('#previous').on("click",function (e) {
          e.preventDefault();
           tumblrPaginate -= 5;
            reloadTumblr();
        });
        reloadTumblr();
});

function reloadTumblr(){
  $("#tumblrFeed").empty();
  $("#tumblrFeed").append("<div class='body'>loading Tumblr</div>");
        $.tumblr.url = 'http://wisdmlab.tumblr.com/api/read/json?callback=?&num=' + tumblrpostCount +'&start=' + tumblrPaginate +''; // set to display 7 posts. off set syntax is start=[postnumtobeginat]
  $.ajax({
      url: $.tumblr.url,
      dataType: 'script',
      timeout: 10000,
      success:function(){
        console.log(tumblr_api_read)
          $("#tumblrFeed").empty();
              if ((tumblr_api_read == undefined) || (tumblr_api_read == null)) {
                  $("#tumblrFeed").append("<div class='title' href='#'>unable to load Tumblr</div>");
                  $("#tumblrFeed").append("<div class='body'><a href=\"#\" onclick=\"javascript:reloadTumblr();\">[retry]</a></div>");
              } else {
              //$("#tumblrFeed").append("<div class='body'><a href=\"#\" style=\"float:center\" onclick=\"javascript:reloadTumblr();\">Refresh News Page</a></div>");
                  $.tumblr.postCount = 0;
                  $.each(tumblr_api_read.posts.slice(0, 50), function(i,post){
                      if ($.tumblr.postCount >= $.tumblr.numPostsToDisplay) {
                        return;
                      }
                      parseTumblrJSON(post);
                      $.tumblr.postCount++;
                  });

              // Apply Expander
              if ($.tumblr.postMaxDescriptionLength > -1) {
                  $('div.expandable').expander({
                    slicePoint:       $.tumblr.postMaxDescriptionLength,  // default is 100
                    expandText:         'Read more.',
                    userCollapseText: 'Read less.'
                  });
              }
          }
      },
      error:function (xhr, statusTxt, errorTxt){
          $("#tumblrFeed").append("<a class='title' href='#'>Tumblr Parse Error</a>");
          $("#tumblrFeed").append("<div class='body'>" + errorTxt + "<br/>" + xhr.responseText + "</div>");
      }
  });
}

function formatDate(d) {
    // return d.toString('dddd, MMMM d, yyyy')
    return 'dddd, MMMM d, yyyy';
}

function processResponse() {
}

function parseTumblrJSON(post) {
    //alert(post.type);
    var d = Date.parse(post["date-gmt"]);
    var dateFmt = formatDate(d);

      switch(post.type)
      {
          case "regular":
          {
                  $("#tumblrFeed").append(
                      "<table style='width: 100%;'><tr><td width='18px'>" +
                      "</td></table>");
              //Place directly before "</td>" <div class='date'>" + dateFmt + "</div>

              $("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + (post["regular-title"] == null ? 'view tumblr' : post["regular-title"])  + "</a>");
              $("#tumblrFeed").append("<div class='body expandable'>" + post["regular-body"] + "</div>");
              $("#tumblrFeed").append("<div class='date'>Posted on " + dateFmt + "</div>");
              break;
          }
          case "link":
          {
                  $("#tumblrFeed").append(
                      "<table style='width: 100%;'><tr><td width='18px'>" +
                      "<a href='" + post.url + "' target='_blank'>" +
                      "<div class='date'>" + dateFmt + "</div></td></table>");                        

              $("#tumblrFeed").append("<a class='title' href='" + post["link-url"] + "' target='_blank'>" + (post["link-text"] == null ? 'view tumblr' : post["link-text"]) + "</a>");
              $("#tumblrFeed").append("<div class='body expandable'>" + post["link-description"] + "</div>");
              break;
          }               
          case "quote":
          {
                  $("#tumblrFeed").append(
                      "<table style='width: 100%;'><tr><td width='18px'>" +
                      "<a href='" + post.url + "' target='_blank'>" +
                      "<div class='date'>" + dateFmt + "</div></td></table>");                        

              $("#tumblrFeed").append("<div class='body'>" + 
                  "<div class='quote expandable'>" + post["quote-text"] + "</div>" +
                  "<div class='quotesrc'>" + post["quote-source"] + "</div>" +
                  "</div>");
              break;
          }               
          case "photo":
          {
                  $("#tumblrFeed").append(
                      "<table style='width: 100%;'><tr><td width='18px'>" +
                      "<a href='" + post.url + "' target='_blank'>" +
                      "</td></table>");                       
              // valid values are: photo-url-[75, 100, 250, 400, 500, 1280]
              $("#tumblrFeed").append("<div class='body'>" + 
                  "<a href='" + post.url + "'>" +
                  "<img src='" + post["photo-url-250"] + "'/></a><br/>" + 
                  post["photo-caption"] + 
                  "</div>", "<div class='date'>Posted on " + dateFmt + "</div>");
              break;
          }
          case "conversation":
          {
                  $("#tumblrFeed").append(
                      "<table style='width: 100%;'><tr><td width='18px'>" +
                      "<a href='" + post.url + "' target='_blank'>" +
                      "<div class='date'>" + dateFmt + "</div></td></table>");                        

              var html = '';
              $("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + (post["conversation-title"] == null ? 'view tumblr' : post["conversation-title"])  + "</a>");

                  for(var i = 0; i < post["conversation"].length; i++) {
                      var conv = post["conversation"][i];                     
                      html += "<div class='convlabel'>" + conv.label + "</div>";
                      html += "<div class='convtext expandable'>" + conv.phrase + "</div>";
                  }

                  /*          
                  $(this).find("line").each(function(){
                      html += "<div class='convlabel'>" + $(this).attr("label") + "</div>";
                      html += "<div class='convtext'>" + $(this).text() + "</div>";
                  });*/

              $("#tumblrFeed").append("<div class='body'>" + html + "</div>");
              break;
          }
          case "audio":
          {
                  $("#tumblrFeed").append(
                      "<table style='width: 100%;'><tr><td width='18px'>" +
                      "<a href='" + post.url + "' target='_blank'>" +
                      "<div class='date'>" + dateFmt + "</div></td></table>");                        

              $("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + post["audio-caption"] + "</a>");
              $("#tumblrFeed").append("<div class='body'>" + post["audio-player"] + "</div>");
              break;
          }
          case "video":
          {
                  $("#tumblrFeed").append(
                      "<table style='width: 100%;'><tr><td width='18px'>" +
                      "<a href='" + post.url + "' target='_blank'>" +
                      "<div class='date'>" + dateFmt + "</div></td></table>");                        

              $("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + post["video-caption"] + "</a>");
              // resize our video code if possible
              var vdo = post["video-player"];
              var re = new RegExp('width=\"([a-zA-Z0-9]*)\"', 'g');
              vdo = vdo.replace(re, 'width="' + $.tumblr.videoWidth + '"');
              re = new RegExp('height=\"([a-zA-Z0-9]*)\"', 'g');
              vdo = vdo.replace(re, 'height="' + $.tumblr.videoHeight + '"');         
              re = new RegExp('400,320', 'g');
              vdo = vdo.replace(re, $.tumblr.videoWidth + ',' + $.tumblr.videoHeight);
              re = new RegExp('400,250', 'g');
              vdo = vdo.replace(re, $.tumblr.videoWidth + ',' + $.tumblr.videoHeight);
              $("#tumblrFeed").append("<div class='body'>" + vdo + "</div>");
              break;
          }               
          default:
              break;
      }
$("#tumblrFeed").append("<div class='clear'>&nbsp;</div>");
}


Controls (goes in html file):

 <div id='controls'>
    <a href="#" id='next'>next</a>:<a href="#" id='previous'>previous</a>
  </div>


Only problem now is that the date isn't being displayed. Weird.... Here's an example: http://ffantasy.com/...umblr-paginate/

This post has been edited by popa: 06 July 2013 - 12:57 PM

Was This Post Helpful? 0
  • +
  • -

#19 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: Having trouble paginating external Tumblr JSON

Posted 07 July 2013 - 02:25 PM

function formatDate(d) {
    // return d.toString('dddd, MMMM d, yyyy')
    return 'dddd, MMMM d, yyyy';
}



This is returning a string of dddd, MMMM d, yyyy every time it is called.
Was This Post Helpful? 0
  • +
  • -

#20 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Having trouble paginating external Tumblr JSON

Posted 07 July 2013 - 02:49 PM

For some reason prior to making the code modification the string output an actual date "Monday, May 1, 2013" or something of that nature. After, it stopped working. Nothing was changed relating to the date function.
Was This Post Helpful? 0
  • +
  • -

#21 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: Having trouble paginating external Tumblr JSON

Posted 07 July 2013 - 05:19 PM

What was wrong with the commented section return d.toString('dddd, MMMM d, yyyy');?

Why did you change it to return just a string?
Was This Post Helpful? 0
  • +
  • -

#22 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: Having trouble paginating external Tumblr JSON

Posted 07 July 2013 - 05:49 PM

Ok,

The date being returned is a string I changed it to
function parseTumblrJSON(post) {
    //alert(post.type);
    var d = new Date(post["date"]);
    var dateFmt = formatDate(d);


Now you can use the formatDate() function along with the Date methodes to extract what you want to show and concatinate it to a string for display.

unction formatDate(d) {
    //return d.toString('dddd, MMMM d, yyyy')
    //return 'dddd, MMMM d, yyyy';
    return d.getMonth();//displays month number


Was This Post Helpful? 0
  • +
  • -

#23 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Having trouble paginating external Tumblr JSON

Posted 07 July 2013 - 08:40 PM

Thanks, that helps. However I'm going through javascript examples to output the entire date "Monday, May 1, 2013" instead of just displaying the numerical format of the month ie: May = 5, June = 6, etc.

function formatDate(d) {
    //return d.toString('dddd, MMMM d, yyyy')
    //return 'dddd, MMMM d, yyyy';
      return d.getMonth();
      return d.getDate();//displays month number
      return d.getFullYear();
}


Was This Post Helpful? 0
  • +
  • -

#24 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: Having trouble paginating external Tumblr JSON

Posted 08 July 2013 - 01:39 AM

This may give you an idea of what to do.
var monthNames = [ "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December" ];

console.log("The current month is " + monthNames[d.getMonth()]);



You will have to do this for days also.
Was This Post Helpful? 0
  • +
  • -

#25 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: Having trouble paginating external Tumblr JSON

Posted 08 July 2013 - 01:56 AM

This fiddle may help also.
Was This Post Helpful? 0
  • +
  • -

#26 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Having trouble paginating external Tumblr JSON

Posted 08 July 2013 - 10:39 AM

Sorry, it looks like it works now. I'm using the following function to output the date:

function formatDate(d) {
    return d.toString('dddd, MMMM d, yyyy')
    //return ('dddd, MMMM d, yyyy');
	//return d.getDay();//displays the day of the from (from 0-6)
	//return d.getMonth();//displays the month (from 0-11)
    //return d.getDate();//displays the day of the month (from 1-31)
	//return d.getFullYear();//displays the year (four digits)
}


The output is formatted this way: Posted on Tue Jul 02 2013 16:47:00 GMT-0400 (Eastern Daylight Time)

That's fine, and I think I'll be able to figure out how to write a function to output it in a different method, but for now this works. Thanks for all your help, and I look forward to being able to help this community when my knowledge level is up to par.
Was This Post Helpful? 0
  • +
  • -

#27 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: Having trouble paginating external Tumblr JSON

Posted 08 July 2013 - 10:43 AM

If you take a look at the fiddle that I linked it will get you on your way to format the date how you want.
Also, you can take out the toString() because its not doing anything.
Was This Post Helpful? 0
  • +
  • -

#28 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Having trouble paginating external Tumblr JSON

Posted 08 July 2013 - 10:50 AM

View Postlaytonsdad, on 08 July 2013 - 10:43 AM, said:

If you take a look at the fiddle that I linked it will get you on your way to format the date how you want.
Also, you can take out the toString() because its not doing anything.


Originally that's what I tried, but when my function reads:

function formatDate(d) {
    return;
}



the script outputs nothing.

This post has been edited by popa: 08 July 2013 - 10:50 AM

Was This Post Helpful? 0
  • +
  • -

#29 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: Having trouble paginating external Tumblr JSON

Posted 08 July 2013 - 10:52 AM

You are returning nothing. you would have to return at least d
Was This Post Helpful? 0
  • +
  • -

#30 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Having trouble paginating external Tumblr JSON

Posted 08 July 2013 - 10:57 AM

Sorry, I'm still learning the syntax of Javascript. It's similar to C++ but different in many ways.
Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3