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
– charlietfl, Commented Apr 15, 2017 at 16:29
Are receiving any errors? Also, your IMG tag is not closed properly, use double quotes to open and close the src. — cosmoonot
– cosmoonot, Commented Apr 15, 2017 at 16:29

Raults · Accepted Answer · 2017-04-15 16:57:34Z

0

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.

edited Apr 15, 2017 at 16:57

answered Apr 15, 2017 at 16:40

Raults

3063 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raults Over a year ago

Feel like down voting without giving any constructive criticism should be banned.

sayanriju · Accepted Answer · 2017-04-15 17:56:56Z

0

In all probabilities, this is just a CORS related error.

Your AJAX request is failing, because the origin of the request (made by JavaScript within your html file) and the API server are "Cross Origin" (basically different domains and/or ports), and browsers tend to restrict "Resource Sharing" between them for security.

If you are using Chrome, try adding an extension like CORS Toggler, enable it and retry.

answered Apr 15, 2017 at 17:56

sayanriju

5706 silver badges8 bronze badges

Collectives™ on Stack Overflow

jquery script not being executed in html

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related