AJAX changing 'this'
AJAX changing 'this'
Hi, I have created a javascript object (ajaxQue below) that contains a method (this.get() below) that is a wrapper for the $.get() function
and another method (this.jobCompleted() below) that is the callback argument for $.get().
The callback method refers to the javascript keyword 'this'. But 'this' doesnt seem to refer to my instantiated object as I would have expected, instead it seems to refer to something inside AJAX. So I can no longer refer to properties within my object (e.g. 'this.prop1' below). I have included a simplified version of my code below. Is jQuery messing with my callback function or am I doing something stupid?
- <!-- test1.htm -->
<html>
<head>
<script type="text/javascript" src="../../utils/jquery-1.4.2.js"></script>
</head>
<body>
<div id="debug"></div>
<script type="text/javascript">
function ajaxQue() {
this.prop1 = 1;
this.get = function( url, data ){
//console.log("this in getJSON= %p", this);
$("#debug").append("prop1=" + this.prop1 + "<br>"); //this works
$.get(url, data, this.jobCompleted );
}
this.jobCompleted = function(response){
//console.log("this in jobCompleted= %p", this);
$("#debug").append("response=" + response + "<br>"); //this works
$("#debug").append("prop1=" + this.prop1 + "<br>"); //this doesnt work
}
}
var theAjaxQue = new ajaxQue();
theAjaxQue.get("test1a.php", "var1=value1");
</script>
</body>
</html>
- <?php
//test1a.php
echo "received by server: " . $_REQUEST['var1'];
?>