1

I've been building an app in jQuery and html 5 that reads rss feed of a blog. I wanted to show a list of titles of rss and when user clicks on the title it goes to a different page where full content is shown. I could get content using ajax and store them in an array. But when I'm clicking on the title, it shows undefined on the next page. I am using jQuery pages.

$(document).ready(function() {
  load_posts();
});

function load_posts() {
  var PAGINATION = $('#pagination');
  var HTML1 = '<li><a href="#post" data-transition="slide" id ="';
  var HTML5 = '"><h4>';
  var HTML2 = '</h4>';
  var HTML3 = '<p>';
  var HTML4 = '</p></a></li>';
  var btn = "";
  var selector = "";
  var i = 0;
  var title = "";
  var pubDate = "";
  var dascription = "";
  var anchorID = "";
  var url = "";
  var fullPost = new Array;
  var link = new Array;
  $.ajax({
    type: 'GET',
    url: 'http://smushbits.com/feed/',
    dataType: 'xml',
    error: function() {
      alert("An error occured!");
    },
    success: function(xml) {
      $(xml).find('item').each(function() {
        title = $(this).find('title').text();
        pubDate = $(this).find('pubDate').text();
        pubDate = pubDate.substring(5, 16);
        description = $(this).find('encoded').text();
        url = $(this).find('link').text();
        fullPost.push(description);
        link.push(url);
        anchorID = "btn" + i.toString();
        $(HTML1 + anchorID + HTML5 + title + HTML2 + HTML3 + pubDate + HTML4).appendTo(PAGINATION);
        i = i + 1;
      });

      for (var j = 0; j < fullPost.length; j++) {
        btn = "#btn" + j.toString();
        selector = $(btn);
        $(document).on("click", selector, function() {
          document.getElementById('entry').innerHTML = fullPost[j];
        });
      }
      PAGINATION.listview("refresh");
    }
  });
}
epascarello
  • 204,599
  • 20
  • 195
  • 236
Vishal Singh
  • 57
  • 1
  • 10
  • 1
    I feel like I saw this earlier. Either way, you need to properly indent your code and isolate *one problem* as well as say what you have tried so far. No one is going to just hand you code. – Mike Cluck Oct 01 '15 at 17:04
  • Yep, proper indentation would go a long way. – lintmouse Oct 01 '15 at 17:06

1 Answers1

1

It is the infamous for loop issue.

for (var j = 0; j < fullPost.length; j++) {
    (function(j) {
      var btn = "#btn" + j;
      $(document).on("click", btn, function() {
          document.getElementById('entry').innerHTML = fullPost[j];
      });
    }(j));
}
epascarello
  • 204,599
  • 20
  • 195
  • 236