Ajax not returning values to chrome but is to FF

Question

Hi All,

I am new to Ajax and have been following a tutorial from JQuery.com. I have set up a script that is very simple, when an h2 element is clicked a php script is called that returns some xml which JQuery the uses to replace the current h2 contents. Below is the javascript content:

$(document).ready(function () {

$('h2').click(function(e){
  e.preventDefault();
  var user = $(this);
  $.post("ajax.php", {id: "1"}, function(xml) {
    // format result
    var result = [
      "Thanks for rating, current average: ",
      $("average", xml).text(),
      ", number of votes: ",
      $("count", xml).text()
    ];
    // output result
    $(user).html(result.join(''));
  } );

});
});

And here is the php script:

<?php 
$av = 5;
$xml = "<ratings><average>$av</average><count>$av</count></ratings>";
header('Content-type: text/xml'); 
echo $xml; 
?>

In Firefox I get the expected: "Thanks for rating, current average: 5, number of votes: 5"

but in Chrome I get: "Thanks for rating, current average: , number of votes: "

As you can see, Chrome doesnt recognise anything passed back in the xml. I am running this on a regular dreamhost hosting account with no additions made to the server by me.

Any help would be greatly appreciated.

Regards Luke

Answer 1

please check the contents of variable xml in chrome. If it's empty, try to set the dataType explicitly:

$.post("ajax.php", {id: "1"}, function(xml) {
// format result
var result = [
  "Thanks for rating, current average: ",
  $("average", xml).text(),
  ", number of votes: ",
  $("count", xml).text()
];
// output result
$(user).html(result.join(''));
}, 'xml');