PHP and AJAX problem?

Question

When a user casts a vote the script updates my database but it wont display the following code below to tell the user its vote has been excepted.

//This will output the movie id, new rating, new votes, and a message.
echo "<result id='".$id."' rating='".$rating."' votes='".$votes."'>Vote cast and saved.</result>n";

How can I fix this problem to get the above code to display when a user enters she or he's vote?

Here is part of the code below I think is the problem.

if(mysql_num_rows(mysql_query("SELECT * FROM `voters` WHERE `id`='".$id."' && `ip`='".$ip."'")) == 0) {
 //This will insert the information about the user, so they can't vote for the same movie again.
    mysql_query("INSERT INTO `voters`(`id`, `ip`) VALUES('".$id."', '".$ip."')");
 //This will add one more vote and add the rating to the total rating.
    mysql_query("UPDATE `movies` SET `votes`=votes+1, `rating`=rating+".$vote_cast." WHERE `id`='".$id."'") or die(mysql_error());

 //This will retrieve the newly updated data about the movie.
    $data = mysql_fetch_array(mysql_query("SELECT * FROM `movies` WHERE `id`='".$id."'"));
 //This will get the average rating and round it to one decimal place.
    $rating = round($data['rating']/$data['votes'], 1);
    $votes = $data['votes'];

 //This will change the output type to XML, instead of HTML.
    header('Content-Type: text/xml');
    header('Pragma: no-cache');
 //Required header in valid XML files
    echo '<?xml version="1.0" encoding="UTF-8"?>'."n";
 //This will output the movie id, new rating, new votes, and a message.
    echo "<result id='".$id."' rating='".$rating."' votes='".$votes."'>Vote cast and saved.</result>n";
}else{
 ////This will change the output type to XML, instead of HTML.
    header('Content-Type: text/xml');
    header('Pragma: no-cache');
 ////Required header in valid XML files
    echo '<?xml version="1.0" encoding="UTF-8"?>'."n";
 //This message will be shown if they have already voted,
    echo "<result id='".$id."' rating='-1' votes='-1'>You have already voted.</result>n";
}

}

Okay maybe it's this part of my Ajax code below that is giving me the problem.

function statechange_rate() {
    if (http.readyState == 4) {
        var xmlObj = http.responseXML;
        var html = xmlObj.getElementsByTagName('result').item(0).firstChild.data;
        var id = xmlObj.getElementsByTagName('result').item(0).getAttribute("id");
        var votes = xmlObj.getElementsByTagName('result').item(0).getAttribute("votes");
        var rating = xmlObj.getElementsByTagName('result').item(0).getAttribute("rating");
  //Before, you may have noticed we set votes="-1" if they had already voted, this was just to provide an easy way to check the return of our script.
        if(votes != -1) {
   //This will inform the user about the vote they have cast.
            document.getElementsByName('output_' + id).item(0).innerHTML = "<br />" + html;
   //This will set a delay to make that message go away in 5000 miliseconds (5 seconds).
            window.setTimeout("document.getElementsByName('output_" + id + "').item(0).innerHTML = '';", 5000);
   //This will update the rating on the page to the new one.
            document.getElementsByName('rating_' + id).item(0).innerHTML = rating;
            document.getElementsByName('votes_' + id).item(0).innerHTML = votes;
        }else{
            document.getElementsByName('output_' + id).item(0).innerHTML = "<br />" + html;
            window.setTimeout("document.getElementsByName('output_" + id + "').item(0).innerHTML = '';", 5000);
        }
    }
}

Answer 1

I believe your problem is that that you are calling data instead of something like textContent:

var html = xmlObj.getElementsByTagName('result').item(0).firstChild.textContent;

However, just to test that everything else is working (if that didn't fix it), do something like this:

var html = "Sample content";

That way you can see if all your getElementsByName calls are working correctly.

Is there a reason you aren't using a library like jQuery to make this more manageable and cross browser proof?

jQuery makes certain things very easy, for instance your ajax call could look something like this (Instead of new XMLHTTPRequest and the other lines of code that go with it). The id and vote are arbitrary and would be referenced in PHP as $_POST['id'] and $_POST['vote']:

$.post('/path/to/file.php', {id: "1", vote:5 }, function(data){
    // Runs when ajax call successfully returns. data is the xml
}, "xml");

And for selecting and updating elements (this would replace your getElementsByName):

$("#output_" + id).html("<br />" + html); // Select by id

Hope that helps explain a little more why you might want to use jQuery or a similar library to simplify your code... and your life.