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).

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:

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>

Answer

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

    }))
}

})

Advertisement

Answer