...

View Full Version : AJAX callback losing instance properties



Technohippy
11-13-2007, 04:20 PM
Hi there!

I have an issue with the following code:


/*============================================================*/
function newsArchive(modID)
{
// properties
this.newsAjaxRequest;
this.newsAjaxURL = "/modules/news/newsArchive.php";
this.newsAjaxResponse;
this.newsAjaxError;
this.newsAjaxUpdateTargetID;
this.modID = modID;
this.yyyy;
this.mm;
this.newsAjaxAction;
this.newsAjaxPostvars = "";

//methods
this.newsArchiveMakeAjax = newsArchiveMakeAjax;
this.newsArchiveDoAjax = newsArchiveDoAjax;
this.newsArchiveUpdate = newsArchiveUpdate;
this.newsArchiveError = newsArchiveError;
this.newsArchiveShow = newsArchiveShow;
this.newsArchiveYear = newsArchiveYear;
this.newsArchiveMonth = newsArchiveMonth;

//constructor triggers
this.newsArchiveMakeAjax();
this.newsArchiveShow();
}
/*============================================================*/
function newsArchiveMakeAjax()
{
this.newsAjaxRequest;
try
{
this.newsAjaxRequest = new XMLHttpRequest();
if (this.newsAjaxRequest.overrideMimeType)
{
this.newsAjaxRequest.overrideMimeType('text/xml');
}
}
catch (trymicrosoft)
{
try
{
this.newsAjaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (othermicrosoft)
{
try
{
this.newsAjaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed)
{
this.newsAjaxRequest = false;
}
}
}

if (!this.newsAjaxRequest)
alert("Error initializing XMLHttpRequest!");
return this.newsAjaxRequest;
}
/*============================================================*/
function newsArchiveDoAjax()
{
this.newsAjaxPostvars = "modID=" + encodeURI(this.modID) + "&ajaxAction=" + encodeURI(this.newsAjaxAction) + "&yyyy=" + encodeURI(this.yyyy) + "&mm=" + encodeURI(this.mm);
this.newsAjaxRequest.open("POST", this.newsAjaxURL, true);
this.newsAjaxRequest.onreadystatechange = this.newsArchiveUpdate;
this.newsAjaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
this.newsAjaxRequest.setRequestHeader("Content-length", this.newsAjaxPostvars.length);
this.newsAjaxRequest.setRequestHeader("Connection", "close");
this.newsAjaxRequest.send(this.newsAjaxPostvars);
}
/*============================================================*/
function newsArchiveUpdate()
{
alert(this.newsAjaxRequest);
if (this.newsAjaxRequest.readyState == 4)
{
alert('hello');
if(this.newsAjaxRequest.status != 200)
{
/* handle server error message */
this.newsAjaxError = 'Connection error for module' + this.modID + '::newsArchive';
this.newsArchiveError();
}
else
{
this.newsAjaxResponse = this.newsAjaxRequest.responseText.split("|");
if(this.newsAjaxResponse[0]==1)
{
/* do posotive response */
alert(this.newsAjaxResponse[1]);
if(this.newsAjaxAction == "newsArchiveShow")
{
document.write(this.newsAjaxResponse[1]);
}
else
{
document.getElementById(this.newsAjaxUpdateTargetID).innerHTML = this.newsAjaxResponse[1];
}
}
else
{
this.newsAjaxError = this.newsAjaxResponse[1].replace(/\n/g, "");
this.newsArchiveError();
}
}
}
}
/*============================================================*/
function newsArchiveError()
{
alert(this.newsAjaxError);
}
/*============================================================*/
function newsArchiveShow()
{
this.newsAjaxUpdateTargetID = "newsArchive" + this.modID;
this.newsAjaxAction = "newsArchiveShow";
this.newsArchiveDoAjax();
}
/*============================================================*/
function newsArchiveYear(yyyy)
{
this.yyyy = yyyy;
this.newsAjaxUpdateTargetID = "newsArchive" + this.modID + "yyyy" + this.yyyy;
this.newsAjaxAction = "newsArchiveYear";
this.newsArchiveDoAjax();
}
/*============================================================*/
function newsArchiveMonth(yyyy,mm)
{
this.yyyy = yyyy;
this.mm = mm;
this.newsAjaxUpdateTargetID = "newsArchive" + this.modID + "yyyy" + this.yyyy + "mm" + this.mm;
this.newsAjaxAction = "newsArchiveMonth";
this.newsArchiveDoAjax();
}
/*============================================================*/


For reasons I cannot fathom
alert(this.newsAjaxRequest) shows "undefined" in the onreadystatechange function newsArchiveUpdate() yet the function fires on each state change perfectly OK

If I change the line in the newsArchiveMakeAjax() function to this:

this.newsAjaxRequest.onreadystatechange = this.newsArchiveUpdate();

the alert returns the object correctly but the onready state function only fires once... it doens't keep going until the readystate reaches 4.



I've been banging my head on the desk with this since 6am... its probably something really simple I just can't see but any advice would be very much appreciated.

Thanks in advance :)

liorean
11-13-2007, 05:17 PM
onreadystatechange does not behave like a DOM0 event. The this value will be the global object. You need to wrap it in a closure that sets a variable instead of the this value. Note that this will leak memory if you don't remove the event handler afterwards.

liorean
11-13-2007, 05:21 PM
If I change the line in the newsArchiveMakeAjax() function to this:

this.newsAjaxRequest.onreadystatechange = this.newsArchiveUpdate();

the alert returns the object correctly but the onready state function only fires once... it doens't keep going until the readystate reaches 4.Actually, you are setting the onreadystatechange to the result of running this.newsArchiveUpdate(), not to the this.newsArchiveUpdate function, which is what you want.

Technohippy
11-13-2007, 06:06 PM
hi and thanks ... :)

I undestand answer #2 but not answer #1... I'm a PHP coder trying to do front end here... how do I do closures and event handler removals in javascript please?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum