CODEWITHSUNDEEP
javascriptapionclickappendimdb
popcorn
popcorn

Reputation: 3

Javascript append with IMDB api

I have this script, I need to fix append and remove the old info on click, also I need to show episode info on third column. How to do that?

I need the same result as https://popcorntime-online.tv/game-of-thrones-season-1-episode-0-15-minute-preview.html?imdb=0944947-1-0

$(document).ready(function() {
  console.log('jQuery');



  var baseUrl = "https://api.themoviedb.org/3/tv/";
  var apikey = "6b4357c41d9c606e4d7ebe2f4a8850ea";
  var appendToResponse = "credits";
  var id = 1399;


  var dataUrl = baseUrl + id + "?api_key=" + apikey + "&append_to_response=" + appendToResponse;

  $.getJSON(dataUrl, function(data) {

    console.log(data);


    var filmtitle = data.name;
    var filmlength = data.episode_run_time;
    var plot = data.overview;


    var release = new Date(data.last_air_date);
    var year = release.getFullYear();
    var seasons = data.seasons.length;






    for (var i = 0; i < data.seasons.length; i++) {
      $(".seasons").append("<div class='row season' data-season='" + data.seasons[i].season_number + "' onclick='seriesInfo(" + id + "," + data.seasons[i].season_number + ")' value='" + data.seasons[i].season_number + "'><a href='#'>Season " + data.seasons[i].season_number + "</a></div>");
      $('.row.season').click(function(e) {
        e.preventDefault();
        $('.season').removeClass('activated');
        $(this).addClass('activated');
      });

    }

  });

});

function seriesInfo(id, num) {
  var seriesURL = "https://api.themoviedb.org/3/tv/" + id + "/season/" + num + "?&api_key=6b4357c41d9c606e4d7ebe2f4a8850ea";
  $.getJSON(seriesURL, function(data) {
    console.log(data);
    for (var i = 0; i < data.episodes.length; i++) {
      var seasonname = data.name;
      var seasonoverview = data.overview;
      var episode = data.episodes[i].name;
      var number = data.episodes[i].episode_number;
      var overview = data.episodes[i].overview;
      var airdate = data.episodes[i].air_date;
      $(".episodes").append("<div data-episode_id='" + number + "' data-episode_num='" + number + "' onclick='seriesShow(" + id + "," + data.episodes[i].episode_number + ")' value='" + data.episodes[i].episode_number + "'class='row episode'><a href='#'><span class='episode_num'>" + number + "</span>&nbsp;&nbsp;<span class='episode_title'>" + episode + "</span><div class='pseudo_click_listener'></div></a></div>");



    }
  });
}

function seriesShow(id, num) {
  var episodeURL = "https://api.themoviedb.org/3/tv/" + id + "/season/" + num + "/episode/" + num + "?&api_key=6b4357c41d9c606e4d7ebe2f4a8850ea";
  $.getJSON(episodeURL, function(data) {
    console.log(data);
    for (var i = 0; i < data.episodes.length; i++) {

      var seasonoverview = data.overview;
      var episode = data.episodes[i].name;
      var number = data.episodes[i].episode_number;
      var overview = data.episodes[i].overview;
      var airdate = data.episodes[i].air_date;
      $(".show").prepend("<div class='column content'><div class='episode_name'>" + episode + "</div><div class='episode_info'><b class='episode_number'>Episode " + number + "</b></div><div class='episode_overview'>" + overview + "</div>");

    }
  });
}
.synopsis {
  font-size: 13px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.65);
  padding-right: 20px;
  height: 120px;
  overflow: auto;
}

.head {
  color: #fff;
  width: 100%;
  height: 240px;
  position: absolute;
  top: 65px;
  left: 0;
  border-bottom: 1px rgba(255, 255, 255, 0.05) solid;
  z-index: 9;
}

.info_cont {
  position: absolute;
  top: 20px;
  left: 185px
}

.runtime_cont {
  display: none;
}

.poster {
  position: absolute;
  top: 25px;
  left: -200px;
  width: 135px;
  height: 197px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
  border: 1px rgba(255, 255, 255, 0.18) solid;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0;
  transition-property: all;
  transition-duration: 0.21s;
  transition-timing-function: ease-out;
}

.poster.fadein {
  opacity: 1;
  left: 20px;
}

.body {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: 9;
  box-sizing: border-box;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.27) 0%, rgba(0, 0, 0, 0.75) 100%);
  /* W3C */
}

.column {
  float: left;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  position: relative;
}

.column.seasons {
  width: 15%;
  overflow: hidden;
}

.column.episodes {
  width: 40%;
  overflow: hidden;
}

.column.content {
  width: 45%;
}

.row {
  height: 35px;
  border-bottom: 1px rgba(255, 255, 255, 0.045) solid;
  font-size: 14px;
  color: #fff;
  line-height: 35px;
  padding: 0 6px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition-property: padding;
  transition-duration: 0.1s;
  transition-timing-function: linear;
}

.row * {
  cursor: pointer !important;
}

.row:hover,
.row.khover {
  padding: 0 12px;
  border-left: 3px rgba(255, 255, 255, 0.4) solid;
}

.row.activated {
  padding: 0 12px !important;
  border-left: 3px rgba(255, 255, 255, 0.8) solid !important;
}

.row:nth-child(odd) {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.125) 0%, rgba(255, 255, 255, 0) 100%);
  /* W3C */
}

.row.episode .pseudo_click_listener {
  position: absolute;
  width: 16px;
  height: 100%;
  right: 0;
  top: 0;
  z-index: 9;
}

.row .episode_title {
  opacity: 0.4;
}

.row:hover .episode_title,
.row.activated .episode_title {
  opacity: 0.68;
}

.row .episode_num {
  font-family: opensansbold
}

.scroller_cont {
  padding-bottom: 15px;
}

.episode_name {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
  font-size: 22px;
  color: #fff;
  font-family: opensansbold;
}

.episode_info {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  padding: 2px 0 15px;
}

.episode_overview {
  height: calc(100% - 135px);
  overflow: auto;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  line-height: 16px;
}

.toolbox_content {
  height: 60px;
  position: absolute;
  bottom: 10px;
  left: 20px;
  z-index: 9;
  width: 100%;
}

.selector {
  margin-bottom: 5px;
  width: 160px !important;
}

.sep {
  margin-right: 15px !important;
}

.row.episode.watched:after {
  content: "\e601";
  color: rgba(255, 255, 255, 0.4);
}


.row.episode:after {
  font-family: icomoon;
  content: "\e60d";
  position: absolute;
  right: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.12);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
  <div class="column seasons"></div>

  <div class='column episodes'></div>
  <div class='show'></div>

Upvotes: -2

Views: 499

Answers (1)

Barmar
Barmar

Reputation: 782315

To clear the old info, use .empty() before the loop that appends the new info.

Also, you shouldn't add the .row.season click handler each time through the loop. That adds multiple handlers to the early rows. You just need to do it once, and it will affect all the rows that were added. 

$(".seasons").empty();
for (var i = 0; i < data.seasons.length; i++) {
  $(".seasons").append("<div class='row season' data-season='" + data.seasons[i].season_number + "' onclick='seriesInfo(" + id + "," + data.seasons[i].season_number + ")' value='" + data.seasons[i].season_number + "'><a href='#'>Season " + data.seasons[i].season_number + "</a></div>");
}
$('.row.season').click(function(e) {
    e.preventDefault();
    $('.season').removeClass('activated');
    $(this).addClass('activated');
});

You could also use event delegation to do it once at the beginning of the application, rather than after every AJAX call. See Event binding on dynamically created elements?

Upvotes: 0

Related Questions