On click popup shows wrong data

Question

I'm making a cinema schedule page for my own use, but I'm facing a problem. I want to make the page popup the info for the movie I click, but it always shows the info for the last movie in the list.

I'm sure it's something simple, but I just don't see it.

the code I use to get the info I need :

    var settings = {
  "async": true,
  "crossDomain": true,
  "url": ("https://api.themoviedb.org/3/search/movie?api_key=e8a6a870421f5cc13e775873bfe1cad8&language=bg&query=")+encodeURIComponent(fn),
  "method": "GET",  
  "headers": {},
  "data": "{}"
}
$.ajax(settings).done(function (response) {
    var plakat = response.results[0].poster_path;
  window.movieId = response.results[0].id;
  window.title = response.results[0].title;
  window.poster = "https://image.tmdb.org/t/p/w92/"+plakat;
  window.overview = response.results[0].overview;
  console.log(response.results[0].title);
  var k;
  for(k=0; k< ttest.length; k++){
  document.getElementById('myPopup').innerHTML = ("<img align='left' src="+window.poster+"><h2>"+window.title+"</h2><br>"+window.overview);
  }
});

then I want to loop all the result so I can change the data shown in the popup, but it doesn't seem to work.

any help will be much appreciated.

Can you produce a minimal version of this? It's a lot to wade through for such a simple question — StudioTime, Mar 17 '17 at 22:46
seems like you send an ajax-request for every entry in your list, and when they respond, you overwrite the content of your popup. So your popup contains the result of the ajax request that resolves last. And all the other requests have been just a waste of time and bandwidth. — Thomas, Mar 17 '17 at 22:49

score 0 · Answer 1 · answered Mar 18 '17 at 20:25

This will display a thumbnail image for each movie. When you click the thumbnail, the title and description (if available) will appear:

JS

var fn = "snow white";
var settings = {
"async": true,
"crossDomain": true,
"url": ("https://api.themoviedb.org/3/search/movie?api_key=e8a6a870421f5cc13e775873bfe1cad8&language=bg&query=")+encodeURIComponent(fn),
"method": "GET",  
"headers": {},
"data": "{}"
}

$.ajax(settings).done(function (response) {

for(var i = 0; i < response.results.length; i++) {
  var obj = response.results[i];

  var plakat = obj.poster_path;
  var movieId = obj.id;

  var title = obj.title.replace(/'/g, "&#39;");
  var title = title.replace(/"/g, '\\"');

  if (plakat !== null) {
    var poster = "https://image.tmdb.org/t/p/w92/"+plakat;
  } else { 
    var poster = ""; 
  }

  var overview = obj.overview.replace(/'/g, "&#39;");
  var overview = overview.replace(/"/g, '\\"');

  $("#movieList").append("<a href='javascript:showInfo("+'"'+title+'"'+","+'"'+overview+'"'+");'><img src='"+poster+"' height='102' width='82' style='padding:5px;'></a>");

}
}); 


function showInfo(title,overview){
  document.getElementById('myPopup').innerHTML = "<b>"+title+"</b>"+"  <br>"+overview; 
}

HTML

<div id="movieList" align="left"></div>
<div id="myPopup"></div>

On click popup shows wrong data

1 Answers1