Search code examples
javascripthtmljqueryfeed

Unable to display JavaScript / jQuery div tag without dependency on another tag

I'm using JavaScript with jQuery to display my RSS Medium feed when there is a <div id="medium-feed"... on the page.

When the JSON data is pulled, I display the data using HTML, some CSS, and the bootstrap library with day.js (to format the date). So far it worked as expected (see code snippets at the bottom).

Preview of the Medium blog posts

I also want to display a more compact version of the feed to my footer that shows the title and published date. So I copied down my original code and have JavaScript look for a <div id="medium-feed-footer"... to display the other version of the feed so it can look like this:

Footer version of the latest blog posts

This only works if I show both of my div elements on the same page, like my blog page:

<div id="medium-feed" username="factmaven" read-more="Read More"></div>
<div id="medium-feed-feed" username="factmaven"></div>

But if I visit any other page that only shows the footer version of my feed, it's empty, as seen on my homepage. When you test out my code snippet, just add the -footer part in the ID on its own and it won't show up. It looks like there is a dependency to show both div tags in order for it to work properly.

How can I have my footer version show up independently? I tried various ways such as breaking this code into two separate files and trying an if/then statement, but the result is always the same.

$(document).ready(function() {
  // Get option values
  var divID = 'medium-feed';
  var mediumUsername = document.getElementById(divID).getAttribute('username');
  var readMore = document.getElementById(divID).getAttribute('read-more');

  /* Medium Feed */
  document.getElementById(divID).innerHTML =
    ($.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/' + mediumUsername,
      function(json) {
        $('#' + divID).html('');
        // For loop each Medium post in HTML structure
        for (var i in json.items) {
          // Define custom value with regex and replace
          var thumbnail = json.items[i].thumbnail.replace(/max\/(.+?)\//g.exec(json.items[i].thumbnail)[1], $('#' + divID).width());
          var subtitle = /<p class="medium-feed-snippet">(.+?)<\/p>/g.exec(json.items[i].description)[1];
          var pubDate = dayjs(json.items[i].pubDate).format('MMM D, YYYY');
          var categories = json.items[i].categories.join(', #');
          // HTML post structure
          $('#' + divID).append(
            '<div class="blog-post col-lg-4 col-md-6 col-sm-12">' +
            '<div class="blog-post-date">' + pubDate + '</div>' +
            '<a href="' + json.items[i].link + '" target="_blank" class="blog-post-image" style="background-image: url(&quot;' + thumbnail + '&quot;);"></a>' +
            '<a href="' + json.items[i].link + '" target="_blank" ' + 'title="' + json.items[i].title + '">' +
            '<h3>' + json.items[i].title + '</h3>' +
            '</a>' +
            '<small>by ' + json.items[i].author + '</small>' +
            '<hr>' +
            '<p>' + subtitle + '.</p>' +
            '<small>#' + categories + '</small>' +
            '<p><a href="' + json.items[i].link + '" target="_blank">' + readMore + ' <i class="fas fa-long-arrow-alt-right"></i></a></p>' +
            '</div>'
          );
        }
      }));

  /* Footer Medium Feed */
  document.getElementById(divID + '-footer').innerHTML =
    ($.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/' + mediumUsername,
      function(json) {
        $('#' + divID + '-footer').html('');
        // For loop each Medium post in HTML structure
        for (var i in json.items.slice(0, 5)) {
          var pubDate = dayjs(json.items[i].pubDate).format('MMM D, YYYY');
          // HTML post structure
          $('#' + divID + '-footer').append(
            '<a href="' + json.items[i].link + '" target="_blank" ' + 'title="' + json.items[i].title + '">' +
            '<h4>' + pubDate + '</h4>' +
            '<h5>' + json.items[i].title + '</h5>' +
            '</a>'
          );
        }
      }));
});
.blog-post-image {
  width: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  overflow: auto;
  display: block;
}

.blog-post-image:after {
  content: "";
  display: block;
  position: relative;
  margin-top: 60%;
  width: 100%;
  z-index: 1;
}

.blog-post-date {
  position: absolute;
  background-color: #ffffff;
  padding: 5px;
  color: #000000;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.6/dayjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-offset-1 col-md-10 col-sm-12">
      <div class="section-title">
        <h3>Latest Blog Posts</h3>
      </div>
      <div id="medium-feed" username="factmaven" read-more="Read More"></div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>

Solution

  • On other pages, Javascript doesn't find an element with id = "medium-feed" so it returns an error. First, check if the element exists.

    $(document).ready(function() {
  // Get option values
  var divID = 'medium-feed';
  var mediumUsername = document.getElementById(divID).getAttribute('username');
  var readMore = document.getElementById(divID).getAttribute('read-more');

 /* Medium Feed */
  var divContainer = document.getElementById(divID);

if (divContainer) {//check if element exists

  divContainer.innerHTML = ($.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/' + mediumUsername,
    function(json) {

      //rest of your code

    }))
}

})