Ad

What Do These Sudden Appearances Of Console Error Messages Mean?

var sendTitle = function() {
  var title = $("input[name='movie-search-title']").val();
  getMovie(title)
  getQuotes(title)
}
$("input[name='movie-search-title']").keydown(function(e) {
  if (e.keyCode == 13) {
    e.preventDefault();
    sendTitle();
  }
})
// movie input autocomplete 
var searchInput = document.getElementById('searchBox');
var baseUrl = "http://sg.media-imdb.com/suggests/";
var result = document.getElementById('result');
searchInput.addEventListener('keyup', function() {
  $("#result").removeClass("hidden");
  //clearing blank spaces from input
  var cleanInput = searchInput.value.replace(/\s/g, "");
  //clearing result div if the input box in empty
  if (cleanInput.length === 0) {
    result.innerHTML = "";
  }
  if (cleanInput.length > 0) {
    var queryUrl = baseUrl + cleanInput[0].toLowerCase() + "/" +
      cleanInput.toLowerCase() +
      ".json";
    $.ajax({
      url: queryUrl,
      dataType: 'jsonp',
      cache: true,
      jsonp: false,
      jsonpCallback: "imdb$" + cleanInput.toLowerCase()
    }).done(function(result) {
      //clearing result div if there is a valid response
      if (result.d.length > 0) {
        result.innerHTML = "";
      }
      for (var i = 0; i < result.d.length; i++) {
        let category = result.d[i].id.slice(0, 2);
        if (category === "tt" || category === "nm") {
          //row for risplaying one result
          let resultRow = document.createElement('p');
          resultRow.setAttribute('class', 'resultRow')
          //creating and setting description
          let description = document.createElement('div');
          description.setAttribute('class', 'description');
          let name = document.createElement('h4');
          let snippet = document.createElement('h5');
          if (category === "tt" && result.d[i].y) {
            name.innerHTML = result.d[i].l + " (" + result.d[i].y + ")";
            let nameText = name.innerHTML
            $(name).click(function(e) {
              e.preventDefault();
              let title = nameText.slice(0, nameText.lastIndexOf(" "))
              getMovie(title)
              getQuotes(title)
            });
          } else {
            name.innerHTML = result.d[i].l;
            let nameText = name.innerHTML
            $(name).click(function(e) {
              e.preventDefault();
              let title = nameText.slice(0, nameText.lastIndexOf(" "))
              getMovie(title)
              getQuotes(title)
            });
          }
          snippet.innerHTML = result.d[i].s;
          $(description).append(name);
          $(resultRow).append(description);
          $("#result").append(resultRow);
        }
      }
    });
  }
});

// primary movie information (API #1)
var getMovie = function(title) {
  $("#result").addClass("hidden")
  $("#main").removeClass("hidden");
  $("#search-form").trigger("reset");
  //format the OMDB api url 
  var apiUrl = `http://www.omdbapi.com/?t=${title}&plot=full&apikey=836f8b0`
  //make a request to the url 
  fetch(apiUrl)
    .then(function(response) {
      // request was successful 
      if (response.ok) {
        response.json().then(function(movieData) {
          // console.log(movieData)
          var movieTitle = movieData.Title
          getMovieId(movieTitle);
          getSoundTrack(movieTitle);
          getTrailer(movieTitle);
          var movieObj = {
            title: movieTitle,
          }
          var pastSearches = loadPastSearches();
          var alreadySearched = false
          if (pastSearches) {
            pastSearches.forEach(s => {
              if (s.title === movieTitle) {
                alreadySearched = true;
              }
            })
          }
          if (!alreadySearched) {
            for (var item of pastSearches) {
              let searchEl = document.createElement("a")
              let pastSearchTitle = item.title
              $(searchEl).text(pastSearchTitle)
              $(searchEl).addClass("past-search-item");
              $("#past-search-dropdown").append(searchEl)
              $(searchEl).click(function(e) {
                e.preventDefault();
                let title = pastSearchTitle
                getMovie(title)
                getQuotes(title)
              });
            }
          }
          saveSearch(movieObj)
          showMovie(movieData);
        });
      } else {
        alert("Error: title not found!");
      }
    })
    .catch(function(error) {
      alert("Unable to connect to CineXScore app");
      console.log(error)
    });
};
// get specialID for other movie details (API #2)
var getMovieId = function(movieTitle) {
  const settings = {
    "async": true,
    "crossDomain": true,
    "url": `https://imdb8.p.rapidapi.com/title/find?q=${movieTitle}`,
    "method": "GET",
    "headers": {
      "x-rapidapi-host": "imdb8.p.rapidapi.com",
      "x-rapidapi-key": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
    }
  };

  $.ajax(settings).done(function(response) {
    console.log(response);
    var specialId = response.results[0].id
    var specialId = specialId.replace("/title/", "")
    var specialId = specialId.replace("/", "")
    // console.log(specialId)
    getMovieImgs(specialId)
    getPromos(specialId)
  });
}
// get hero image (API #2)
var getPromos = function(specialId) {
  const settings = {
    "async": true,
    "crossDomain": true,
    "url": `https://imdb8.p.rapidapi.com/title/get-hero-with-promoted-video?tconst=${specialId}&purchaseCountry=US&currentCountry=US`,
    "method": "GET",
    "headers": {
      "x-rapidapi-host": "imdb8.p.rapidapi.com",
      "x-rapidapi-key": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
    }
  };
  $.ajax(settings).done(function(promoData) {
    // console.log(promoData);
    $("#hero-image").attr("src", promoData.heroImages[0].url)
  });
}
// get additional images (API #2)
var getMovieImgs = function(specialId) {
  const settings = {
    "async": true,
    "crossDomain": true,
    "url": `https://imdb8.p.rapidapi.com/title/get-images?tconst=${specialId}&limit=25`,
    "method": "GET",
    "headers": {
      "x-rapidapi-host": "imdb8.p.rapidapi.com",
      "x-rapidapi-key": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
    }
  };

  $.ajax(settings).done(function(movieImgs) {
    // console.log(movieImgs);
    $("#cast-image").attr("src", movieImgs.images[0].url);
  });
}
// get movie soundtrack (API #3)
var getSoundTrack = function(movieTitle) {
  var movieTitle = movieTitle.replaceAll(" ", "")
  const settings = {
    "async": true,
    "crossDomain": true,
    "url": `https://shazam.p.rapidapi.com/search?term=${movieTitle}%20soundtrack&locale=en-US&offset=0&limit=5`,
    "method": "GET",
    "headers": {
      "x-rapidapi-host": "shazam.p.rapidapi.com",
      "x-rapidapi-key": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
    }
  };

  $.ajax(settings).done(function(soundTrackData) {
    // console.log(soundTrackData);
    var albumName = soundTrackData.tracks.hits[0].track.title
    var albumDetails = soundTrackData.tracks.hits[0].track.subtitle
    var albumImg = soundTrackData.tracks.hits[0].track.images.coverart
    var albumUrl = soundTrackData.tracks.hits[0].track.url
    $("#soundtrack-title").text(albumName)
    $("#soundtrack-image").attr("src", albumImg)
    $("#soundtrack-link").attr("href", albumUrl)
    $("#soundtrack-details").text(albumDetails)
    var trackObj = {
      name: albumName,
      url: albumUrl
    };
    $("#save-to-favorites").click(function(e) {
      e.preventDefault();
      saveTrack(trackObj)
    });
  });
}
// get movie trailer (API #3)
var getTrailer = function(movieTitle) {
  var movieTitle = movieTitle.replaceAll(" ", "");
  var movieTitle = `${movieTitle}officialtrailer`
  const settings = {
    "async": true,
    "crossDomain": true,
    "url": `https://youtube-search-results.p.rapidapi.com/youtube-search/?q=${movieTitle}`,
    "method": "GET",
    "headers": {
      "x-rapidapi-host": "youtube-search-results.p.rapidapi.com",
      "x-rapidapi-key": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
    }
  };

  $.ajax(settings).done(function(trailerData) {
    // console.log(trailerData);
    $("#video-title").text(trailerData.items[0].title)
    var embedCode = trailerData.items[0].url.replace("https://www.youtube.com/watch?v=", "")
    var trailerLink = `https://www.youtube.com/embed/${embedCode}`
    $("#trailer").attr("src", trailerLink)
    $("#video-description").text(trailerData.items[0].description)

  });
}
// get movie quotes (API #4)
var getQuotes = function(title) {
  $("#quote-items").html("");
  $("#movie-quotes-heading").removeClass("hidden");
  var title = title.replaceAll(" ", "_")
  const settings = {
    "async": true,
    "crossDomain": true,
    "url": `https://movie-and-tv-shows-quotes.p.rapidapi.com/quotes/from/${title}`,
    "method": "GET",
    "headers": {
      "x-rapidapi-host": "movie-and-tv-shows-quotes.p.rapidapi.com",
      "x-rapidapi-key": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
    }
  };

  $.ajax(settings).done(function(quoteData) {
      // console.log(quoteData);
      showQuotes(quoteData)
    })
    .fail(function(xhr, status, error) {
      //Ajax request failed.
      var errorMessage = xhr.status + ': ' + xhr.statusText
      console.log(`Error - ${errorMessage}`);
      $("#movie-quotes-heading").addClass("hidden");
    });
}
// change the page HTML to show movie information
var showMovie = function(movieData) {
  $("#movie-title").text(movieData.Title)
  $("#year-rating").text(`${movieData.Year}, ${movieData.Rated}`)
  $("#genre").text(`${movieData.Genre}`)
  $("#synopsis").text(movieData.Plot)
  $("#poster").attr("src", movieData.Poster);
  $("#cast-list").text(`Main Cast: ${movieData.Actors}`)
  $("#director").text(`Director: ${movieData.Director}`)
  $("#writer").text(`Writer(s): ${movieData.Writer}`)
  $("#imdb-rate").text(`${movieData.Ratings[0].Source} - ${movieData.Ratings[0].Value}`)
  $("#tomatoes-rate").text(`${movieData.Ratings[1].Source} - ${movieData.Ratings[1].Value}`)
  $("#metacritic-rate").text(`${movieData.Ratings[2].Source} - ${movieData.Ratings[2].Value}`)
  var tomatoesRate = (movieData.Ratings[1].Value).replace("%", "")
  parseInt(tomatoesRate)
  if (tomatoesRate <= 60) {
    $("#tomatoes-rate-image").attr("src", "https://www.clipartmax.com/png/full/351-3516739_cherry-tomato-clipart-tomatoe-rotten-tomatoes-icon-png.png")
  } else if (tomatoesRate >= 60) {
    $("#tomatoes-rate-image").attr("src", "https://www.clipartmax.com/png/full/50-503981_rotten-tomatoes-fresh-logo.png")
  }
}
// if there are famous quotes display those on page 
var showQuotes = function(quoteData) {
  $("#movie-quotes-heading").text("Movie Quotes")
  quoteData.forEach(quoteItem => {
    var carouselItem = document.createElement("div")
    $(carouselItem).html(`<h4 class='quote'>"${quoteItem.quote}"<br><br><span class='quote-character'>-${quoteItem.character}</span></h4><br>`)
    $(carouselItem).appendTo("#quote-items");
  });
}
// save past search
var saveSearch = function(movieObj) {
  var pastSearches = loadPastSearches();
  pastSearches.push(movieObj);
  localStorage.setItem("movieObjects", JSON.stringify(pastSearches))
}
loadPastSearches = function() {
  var pastSearches = JSON.parse(localStorage.getItem("movieObjects"));
  if (!pastSearches || !Array.isArray(pastSearches)) {
    var pastSearches = []
  }
  return pastSearches;
}
// dropdown favorite soundtrack buttons 
var saveTrack = function(trackObj) {
  var faveTracks = JSON.parse(localStorage.getItem("trackObjects"));
  if (!faveTracks || !Array.isArray(faveTracks)) {
    var faveTracks = []
  }
  var alreadySearched = false
  if (faveTracks) {
    faveTracks.forEach(t => {
      if (t.name === trackObj.name) {
        alreadySearched = true;
      }
    })
  }
  if (!alreadySearched) {
    let trackEl = document.createElement("a")
    $(trackEl).addClass("fave-track");
    $(trackEl).text(trackObj.name);
    $(trackEl).attr("href", trackObj.url);
    $(trackEl).attr("target", "_blank")
    $("#favorite-tracks-dropdown").append(trackEl)
  }
  faveTracks.push(trackObj);
  localStorage.setItem("trackObjects", JSON.stringify(faveTracks))
}
// populate favorites list when page loads
var populateFavorites = function() {
  var faveTracks = JSON.parse(localStorage.getItem("trackObjects"));
  if (!faveTracks || !Array.isArray(faveTracks)) {
    var faveTracks = []
  }
  for (var track of faveTracks) {
    let trackEl = document.createElement("a")
    $(trackEl).addClass("fave-track");
    $(trackEl).text(track.name);
    $(trackEl).attr("href", track.url);
    $(trackEl).attr("target", "_blank")
    $("#favorite-tracks-dropdown").append(trackEl)
  }
}
$(window).load(populateFavorites())
// clear searches and favorite tracks
$("#clear-searches").click(function(e) {
  e.preventDefault();
  [...$(".past-search-item")].map(thisSearch => thisSearch.remove());
  localStorage.removeItem("movieObjects");
});
$("#clear-favorites").click(function(e) {
  e.preventDefault();
  [...$(".fave-track")].map(thisTrack => thisTrack.remove());
  localStorage.removeItem("trackObjects");
});
/* KEEP THIS CLASS */

.hidden {
  display: none;
}


/* IMPORTANT FOR JS */


/* Styling I added (can change) */

#cast-image {
  width: 80%;
  height: 80%;
}

#tomatoes-rate-image {
  width: 80%;
  height: 80%;
}

#soundtrack-image {
  width: 60%;
  height: 60%;
}

#video-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.navbar {
  display: flex;
  flex-direction: row;
  margin-bottom: 0;
  background-color: #40376E;
  border: 0;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
  letter-spacing: 4px;
  border-radius: 0;
  font-family: Montserrat, sans-serif;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

footer .glyphicon {
  font-size: 20px;
  margin-bottom: 20px;
  color: #40376E;
}


/* end of my own styling */


/* all from template */

body {
  font: 400 15px Lato, sans-serif;
  line-height: 1.8;
  color: #818181;
}

h2 {
  font-size: 24px;
  text-transform: uppercase;
  color: #303030;
  font-weight: 600;
  margin-bottom: 30px;
}

h4 {
  font-size: 19px;
  line-height: 1.375em;
  color: #303030;
  font-weight: 400;
  margin-bottom: 30px;
}

.jumbotron {
  background-color: #40376E;
  color: #fff;
  padding: 100px 25px;
  font-family: Montserrat, sans-serif;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

form {
  width: 100%;
  display: flex;
  gap: 20px;
  flex-direction: row;
}

#results {
  display: flex;
  flex-direction: column;
  justify-content: left;
  width: 20%;
  text-align: left;
  color: antiquewhite;
}

.container-fluid {
  padding: 60px 50px;
}

.bg-grey {
  background-color: #f6f6f6;
}

.logo-small {
  color: #40376E;
  font-size: 50px;
}

.logo {
  color: #40376E;
  font-size: 200px;
}

.thumbnail {
  padding: 0 0 15px 0;
  border: none;
  border-radius: 0;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}

.item h4 {
  font-size: 19px;
  line-height: 1.375em;
  font-weight: 400;
  font-style: italic;
  margin: 70px 0;
}

.item span {
  font-style: normal;
}

@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

@media screen and (max-width: 768px) {
  .col-sm-4 {
    text-align: center;
    margin: 25px 0;
  }
  .btn-lg {
    width: 100%;
    margin-bottom: 35px;
  }
}

@media screen and (max-width: 480px) {
  .logo {
    font-size: 150px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>CineXScore</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link target="_blank" rel="nofollow noreferrer" href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
  <link target="_blank" rel="nofollow noreferrer" href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
  <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="assets/css/style.css">
</head>

<body id="top" data-spy="scroll" data-target=".navbar" data-offset="60">

  <!-- Navigation Menu -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <a id="logo" class="navbar-brand">CineXScore</a>
    <div class="dropdown navbar-brand">Past Searches
      <i class="fa fa-caret-down"></i>
      <div id="past-search-dropdown" class="dropdown-content">
        <a id="clear-searches">Clear</a>
      </div>
    </div>
    <div class="dropdown navbar-brand">Favorite Tracks
      <i class="fa fa-caret-down"></i>
      <div id="favorite-tracks-dropdown" class="dropdown-content">
        <a id="clear-favorites">Clear</a>
      </div>
    </div>
  </nav>


  <!-- Movie Search Section -->
  <div id="movie-search" class="jumbotron text-center">
    <h1>Search for a movie!</h1>
    <form id="search-form">
      <input id="searchBox" name="movie-search-title" type="text" class="form-control" size="50" placeholder="movie title" />
      <button id="searchBtn" type='button' class="btn btn-danger" onclick="sendTitle()">Search</button>
    </form>
    <div id="result"></div>
  </div>

  <!-- hero image -->
  <div id="hero">
    <img id="hero-image" src="" />
  </div>

  <main id="main" class=hidden>
    <!-- Container (primary movie info) -->
    <div id="movie-info" class="container-fluid">
      <div class="row">
        <div class="col-sm-8">
          <h2 id="movie-title"></h2><br>
          <h4 id="year-rating"></h4>
          <h4 id="genre"></h4><br>
          <p id="synopsis"></p>
          <br><button target="_blank" rel="nofollow noreferrer" href="#soundtrack" id="get-soundtrack" class="btn btn-default btn-lg">Get the soundtrack</button>
        </div>
        <div class="col-sm-4">
          <span id="movie-poster">
        <img id="poster" src="" />
      </span>
        </div>
      </div>
    </div>

    <!-- Container (cast) -->
    <div id="cast" class="container-fluid bg-grey">
      <div class="row">
        <div id="cast-icon" class="col-sm-4">
          <span>
        <img id="cast-image" src="https://cdn-icons-png.flaticon.com/512/3873/3873990.png" />
      </span>
        </div>
        <div class="col-sm-8">
          <h2>Cast</h2><br>
          <h4 id="cast-list"></h4><br>
          <p id="director">
          </p>
          <p id="writer">
          </p>
        </div>
      </div>
    </div>

    <!-- Container (Score Section) -->
    <div id="rating" class="container-fluid">
      <div class="row">
        <div class="col-sm-4">
          <span id="rating-img">
        <img id="tomatoes-rate-image" src="https://www.pinpng.com/pngs/m/339-3397388_movie-film-clipart-png-download-film-reel-clip.png"/>
      </span>
        </div>
        <div class="col-sm-8 text-center">
          <h2>SCORE</h2><br>
          <h4 id="imdb-rate"></h4><br>
          <h4 id="tomatoes-rate"></h4><br>
          <h4 id="metacritic-rate"></h4><br>
        </div>
      </div>
    </div>

    <!-- Container (Sountrack Section) -->
    <div id="soundtrack" class="container-fluid text-center bg-grey">
      <h2>Soundtrack</h2><br>
      <h4 id="soundtrack-title"></h4>
      <div class="container-fluid text-center">
        <a id="soundtrack-link" target="_blank" rel="nofollow noreferrer" href="" target="_blank">
          <img id="soundtrack-image" src="https://www.pinclipart.com/picdir/middle/572-5727023_icon-music-and-film-clipart.png" />
        </a>
        <p id="soundtrack-details"></p>
        <button id="save-to-favorites" class="btn btn-default btn-lg">Save to favorites!</button>
      </div>
    </div>

    <!-- Container (Movie Quotes Section)-->
    <div id="movie-quotes" class="container-fluid text-center">
      <h2 id="movie-quotes-heading"></h2>
      <div id="quote-items" class="carousel slide text-center" data-ride="carousel"></div>
    </div>

    <!-- Container (Trailer Section)-->
    <div id=video-container>
      <h4 id="video-title"></h4>
      <iframe id="trailer" width="860" height="615" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <p id="video-description"></p>
    </div>

    <!-- Footer -->
    <footer class="container-fluid text-center">
      <a target="_blank" rel="nofollow noreferrer" href="#top" title="To Top">
        <span class="glyphicon glyphicon-chevron-up"> Top </span>
      </a>
    </footer>
  </main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>

</html>

Could someone please explain to me what the first and the last two console error messages mean? They randomly started appearing in my app after it was previously working perfectly. I am confused about why there are these errors all of a sudden. I know what the 404 error is, but I don't understand the first message (problem with the jquery script) and the sudden appearance of the last two error messages (blocked by the client). If anyone has any insight as to what these mean and how to fix them I would be very grateful.

console error messages (please help with first and last two)

Ad

Answer

The first error is related to the $(window).load(populateFavorites()); in your script.js.

You are using version 3.5.1 of jQuery, and .load() was removed in version 3.0.

You can replace it with $(window).on("load", populateFavorites); and you will be fine.

The last two errors look like they are related to using an Adblocker (try disabling it, refresh the page, and check if the errors persist 😁).

Ad
source: stackoverflow.com
Ad