Unique span ids for ajax

[harmor]

I am trying to write an AJAX script that will display IMDb rating when I mouse over text. It works but it only displays the rating on the first result due to it being the first span tag it finds.

Here is the page: http://www.bobtownmctchargeumc.org/com/index.php

Hover over "Rating:"

 

Here is the JS

var url = "server_script.php?title="; // The server-side script
   
function handleHttpResponse() {   
    if (http.readyState == 4) {
          if(http.status==200) {
              var results=http.responseText;
         	 	document.getElementById('imdbrating').innerHTML = results;
         	 //alert(results);
          }
          }
    }
   
function getimdbrating(title) {     
    //var sId = document.getElementById("ajax_res").value;
    http.open("GET", url + title, true);
    http.onreadystatechange = handleHttpResponse;
    http.send(null);
}
function getHTTPObject() {
  var xmlhttp;

  if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
  }
  else if (window.ActiveXObject){
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    if (!xmlhttp){
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
   
}
  return xmlhttp;


}
var http = getHTTPObject(); // We create the HTTP Object

 

Here is the html.

<span onmouseover=\"getimdbrating('".$movRows['imdb']."');return false;\">Rating: </span> <span id='imdbrating'></span>

 

 

I want the rating to display next to the movie.

 

[xtopolis]

2 ways I can think of doing this off hand:

-Add a counter to the spans. [explanation provided]

-Get the DOM next sibling(?). [not well versed in this, but you could look it up]

 

When PHP builds that line:

<span onmouseover=\"getimdbrating('".$movRows['imdb']."');return false;\">Rating: </span> <span id='imdbrating'></span>

have a counter going.

 

For example:

//while looping through database results
$i=0;
while(...) {
  echo "<span onmouseover=\"getimdbrating('".$movRows['imdb']"','$i');return false;\">Rating: </span> <span id='imdbrating$i'></span>"
$i++
}

And modify your ajax function to accept the id of the span to change.

 

function getimdbrating(title,spanid){
  var spanToChange = document.getElementById("imdbrating"+spanid);
..
}

or something similar.

[harmor]

I decided to go put the rating in a database, it's much easier.

I was using cURL to get the results because imdb ratings can change but I'm going to have a script automatically loop through the movies on a monthly basis and update their ratings.