jquery script not being executed in html

Question

I am attempting to retrieve information from the Movie DB API and the jquery code doesn't seem to be executing. I thought my JSON code may be off but after testing before important functions I realised that it wasn't being run. Here is the script:

<script type="text/javascript">
//test 0
$("#title").html('<h1>JS Loaded</h1>');
$(document).ready(function(){
  //test 1
  $("#title").html('<h1>Document Ready</h1>');
  var getPoster = function(){
    //test 2
    $("#title").html('<h1>Get poster Executed</h1>');
    $.getJSON(
    "http://api.themoviedb.org/3/discover/movie?with_cast=31&sort_by=popularity.desc&api_key=d34d1c194fd655e99cc15a631bad6760&page=1",
   function(data) {
     if (data != "Nothing found."){
       $('#poster').html('<img alt="Film/Show Poster" width="101px" height="150px" src=' + data.results[0].poster_path + ';>');
     } else {
       $('#title').html('<h1>NO POSTER WAS FOUND</h1>');
     }
    });
  }
  $('#poster').click(getPoster);
});

jQuery is declared in the header, like so:

script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">

Any insight onto what the problem may be would be much appreciated.

be more specific about what is and what isn't working and also report any errors thrown in console (if any). Take a few minutes to read How to Ask — charlietfl
Are receiving any errors? Also, your IMG tag is not closed properly, use double quotes to open and close the src. — cosmoonot

Raults Raults · Accepted Answer · 2017-04-15T16:40:30

I've had this happen to me in a similar situation, except with a get and a post. I ended up just swapping to an ajax call. try this:

$.ajax({
  dataType: "json",
  url: "http://api.themoviedb.org/3/discover/movie?with_cast=31&sort_by=popularity.desc&api_key=d34d1c194fd655e99cc15a631bad6760&page=1",
  success: (data) => {
if (data != "Nothing found."){
       $('#poster').html('<img alt="Film/Show Poster" width="101px" height="150px" src=' + data.results[0].poster_path + ';>');
     } else {
       $('#title').html('<h1>NO POSTER WAS FOUND</h1>');
     }
},
});

Don't quote me on this, because it doesn't explicitly say so in the documentation, but I think the .getJSON() call has the response the get is sending back as the second parameter and not the actual response data you got from the endpoint.

jquery script not being executed in html

3 Answers