AJAX callback losing instance properties

Technohippy · 11-13-2007, 03:20 PM

Hi there!

I have an issue with the following code:

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, 04: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, 04:21 PM

Quote:

Originally Posted by Technohippy

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, 05: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?