Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    AJAX callback losing instance properties

    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

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeň, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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 <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeň, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Quote Originally Posted by Technohippy View Post
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #4
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •