I am trying to convert my webpage to ajax but I cant get it to return anything.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
// events
$("#test").click(function(){
var myData;
myData = makeDataVar();
sendData(myData);
});
// functions
function makeDataVar(){
return "name=joe&location=bostin";
}
function sendData(myData){
alert("start mydata function");
$.ajax({
type: "POST",
url: "http://www.mypage.com/submitMe.php",
dataType : "json",
data: myData,
success: function (msg) {
alert("Data saved: " + nameMsg);
alert("Data saved: " + locationMsg);
alert("data saved: " + error);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("error " + errorThrown);
}
});
alert("end mydata function");
}
}); // end document.ready
//-->
</script>
</head>
<body>
<button type="button" id="test" >Add New</button>
</body>
</html>
PHP
<?php
$myVar = $_POST['name'];
$return['nameMsg'] = "thanks $myVar";
$myVar = $_POST['location'];
$return['locationMsg'] = "from $myVar";
$return['error'] = false;
echo json_encode($return);
?>
I am getting all of my javascript alerts except for those inside the ajax statement (neither success or error). It is almost like my script is skipping over that one statement. I am not sure what I am missing here but I have spent a couple of hours trying to figure it out. Any help you could offer would be greatly appreciated.