I have a very simple javascript class that does an ajax call to a web service of mine via jquery. It returns the data successfully, but I am unable to retrieve it via a variable I set the data to. I don't think it is a matter of the ajax call being asynchronous or not b/c I have set up event handlers for all the ajax events, but some dont' fire. I have no idea what is wrong. Here is the complete code:
Javascript:
function testClass(){
this.returnData = "";
this.FireAjax = function(){
$.getJSON("http://localhost/mywebapp/webservices/service.asmx/Initialize?userID=12&jsoncallback=?",
function(data){
this.returnData = data.d;
alert(data.d);
}
);
}
}
HTML page:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://localhost/mywebapp/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="testClass.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var obj = new testClass();
$("#debug").ajaxError(function(event, request, settings){
$(this).append("<b>Ajax Error!</b><br />"); //this does not fire
});
$("#debug").ajaxSend(function(evt, request, settings){
$(this).append("<b>Ajax Send!</b><br />"); //this does not fire!?
});
$("#debug").ajaxStop(function(){
$(this).append("<b>Ajax Stopped</b><br />"); //this fires
});
$("#debug").ajaxComplete(function(event,request, settings){
$(this).append("<b>Ajax Completed!</b><br />"); //this fires
$(this).append("<h2>" + obj.returnData + "</h2>"); //this returns an empty string!!!!!!
});
$("#debug").ajaxSuccess(function(evt, request, settings){
$(this).append("<b>Ajax Successful!</b><br />"); //this fires
});
$("#debug").ajaxStart(function(){
$(this).append("<b>Ajax Started!</b><br />"); //this fires
});
obj.FireAjax();
});
</script>
</head>
<body>
<div id="debug">
</div>
</body>
</html>
Additional Info: If I remove the complete event in my html page and place the call to obj.returnData in my stop event (thinking that perhaps my html complete event overwrites my testClass complete function), i get the same results.