ajax callback not working - php

Question

i cannot seem to get a callback to work from this but it gets a response its a simple test. anyone know why it dosnt do as i want
<script type="text/javascript">
$(document).ready(function(e) {
$("button").click(function() {
var msg = $("#txt").val();
$.post(
"http://localhost/bot.php",
{msg: msg},
function(data,status) {
$("p").text(data);
}
);
});
});
</script>
The PHP, and could anyone suggest a good JavaScript tool to help me find errors?
<?php
class ai
{
private $msg;
public function __construct($msg)
{
$this->msg = $msg;
}
public function respond()
{
switch($this->msg)
{
case "hi":
echo "Hello Mr Brown How are You";
break;
case "fine":
echo "Good to hear Did you know Zanda hard Coded me?";
break;
case "im fine":
echo "Good to hear Did you know Zanda hard Coded me?";
break;
default:
echo "??????????????????????????????" .
"That means i was extra rush prototype.......i cant answer that";
}
}
}
$talk = new ai($_POST['msg']);
$talk->respond();
?>
<div class="box">
<p>text</p>
<textarea id="txt"></textarea>
<button>click</button>
</div>
there is the html made it as short as can be

Answer 1

Something to try here too is to change your $.post for $.ajax so you can specify an error callback. $.get, $.post etc are just shorthands for $.ajax anyhow. Try something like this:
("button").click(function() {
var msg = $("#txt").val();
$.ajax(
url: "http://localhost/bot.php",
data: {msg: msg},
dataType: 'jsonp',
success: function(data,status) {
console.log(data, "returned with status:", status);
},
error: function(obj, status, error){
console.log("Error!", obj, status, error);
}
);
});
Just because you're getting a 200 response doesn't mean everything's working correctly. All that's saying is that the POST was successful. You need to check the response text to see if any errors are being returned.
EDIT: added in dataType: 'jsonp' to request.

Answer 2

It seems like it is due to the Same Origin Policy and from the MDN documentation
The port number is kept separately by the browser. Any call to the setter, including document.domain = document.domain causes the port number to be overwritten with null. Therefore one can not make company.com:8080 talk to company.com by only setting document.domain = "company.com" in the first. It has to be set in both so that port numbers are both null.
So that is the reason you are getting null as you said in your responses
Try adding datatype:"jsonp". It shoudl work like this.
$(document).ready(function(e) {
$("button").click(function() {
var msg = $("#txt").val();
$.post(
"http://localhost/bot.php",
{msg: msg},
function(data,status) {
$("p").text(data);
},
dataType:"jsonp"
);
});
});
Further reading here.
Hope that helps.