Event Encapsulation Problem

[blaine]

Hi,

I am working on some custom google map. This map will do an XML
Request then a marker is click to retrieve that data for that marker.

Where I am encountering a problem is within the GEvent.addListener. I
define "parent" prior to the GEvent.addListener so that I can have
access to my "parent" javascript class. Allowing me to make the
function call "parent.getXMLRequestObj().requestURL( url, 'POST',
postData, requestHandler );" within the GEvent.

However, since I do a ajax request withing the GEvent I also need my
requestHandler to have access to my "parent" object. No matter which
different ways I try the code that calls "parent" within my
requestHandler do not access to this.

How can I get access to "parent" and "ch" within requestHandler?

Code Snippet Below

classGMap.prototype.displayMarker = function( classHash ){

var marker = new GMarker( classHash.getValueByKey('point') );
marker.loaded = false;

// Set parent variable to be "this" class (used in GEvent)
var parent = this;
// Set ch variable to classHash (supposed to work in
requestHandler but does not)
var ch = classHash;

//Add a event listener for the maker that will first display
"Loading" then switch to the retreived data

GEvent.addListener(marker, "click", function(){

// Check to see if we need to retreive the data
if (marker.loaded){
marker.openInfoWindowHtml( marker.html );

}else{
marker.openInfoWindowHtml( "Loading..." );


var url = "http://www.fakeurl.com";
var postData = new Array();

var objMode = new Object();
objMode.key = 'mode';
objMode.value= 'maps_google_description';
postData.push( objMode );

var objMode = new Object();
objMode.key = 'table_id';
objMode.value = classHash.getValueByKey('table_id') ;
postData.push( objMode );

var objMode = new Object();
objMode.key = 'listing_id';
objMode.value= classHash.getValueByKey('listing_id');
postData.push( objMode );

var objMode = new Object();
objMode.key = 'position';
objMode.value= classHash.getValueByKey('position');
postData.push( objMode );


// Create the function that will handle the Ajax results
var requestHandler = function(request) {
if (request.readyState == 4) {
html = request.responseText;
var xmlDoc = GXml.parse(request.responseText);
var points =
xmlDoc.documentElement.getElementsByTagName("point");

//Returned results are in Base 64. Decode them
// PARENT IS NEVER FOUND -- ENCAPSULTATION PROBLEM?
var html =
parent.getBase64Decoded(points[0].getAttribute("desc"));
marker.html = "<div style=\"width: 300px;font-
size: 12px;text-align: left;\"" + html + "</div>";

//Create some tabs for the InfoWindow
//ch IS NEVER FOUND -- ENCAPSULATION PROLEM?
var tabArray = new Array();
tabArray.push( new GInfoWindowTab('Content',
marker.html) );
tabArray.push( new GInfoWindowTab('Save
Point', "<div style=\"width: 300px;font-size: 12px;text-align: left;
\"><a href=\"#\" onclick=\"alert(ch); gMapObj.savePoint(ch);return
false;\">Point Saved</div>") );

//Add the tabs to the info window
marker.openInfoWindowTabsHtml( tabArray );

// Set the marker to loaded so we don't do another request if this
point is selected again
marker.loaded = true;
}
};

// Do the Ajax request
parent.getXMLRequestObj().requestURL( url, 'POST',
postData, requestHandler );
}
} );
}



Example Code Below

//Display a GMarker on the map
classGMap.prototype.displayMarker = function( classHash ){

var marker = new GMarker( classHash.getValueByKey('point') );
marker.loaded = false;

// Set parent variable to be "this" class (used in GEvent)
var parent = this;
// Set ch variable to classHash (supposed to work in
requestHandler but does not)
var ch = classHash;

//Add a event listener for the maker that will first display
"Loading" then switch to the retreived data

GEvent.addListener(marker, "click", function(){

// Check to see if we need to retreive the data
if (marker.loaded){
marker.openInfoWindowHtml( marker.html );

}else{
marker.openInfoWindowHtml( "Loading..." );


var url = "http://www.fakeurl.com";
var postData = new Array();

var objMode = new Object();
objMode.key = 'mode';
objMode.value= 'maps_google_description';
postData.push( objMode );

var objMode = new Object();
objMode.key = 'table_id';
objMode.value = classHash.getValueByKey('table_id') ;
postData.push( objMode );

var objMode = new Object();
objMode.key = 'listing_id';
objMode.value= classHash.getValueByKey('listing_id');
postData.push( objMode );

var objMode = new Object();
objMode.key = 'position';
objMode.value= classHash.getValueByKey('position');
postData.push( objMode );


// Create the function that will handle the Ajax results
var requestHandler = function(request) {
if (request.readyState == 4) {
html = request.responseText;
var xmlDoc = GXml.parse(request.responseText);
var points =
xmlDoc.documentElement.getElementsByTagName("point");

//Returned results are in Base 64. Decode them
// PARENT IS NEVER FOUND -- ENCAPSULTATION PROBLEM?
var html =
parent.getBase64Decoded(points[0].getAttribute("desc"));
marker.html = "<div style=\"width: 300px;font-
size: 12px;text-align: left;\"" + html + "</div>";

//Create some tabs for the InfoWindow
//ch IS NEVER FOUND -- ENCAPSULATION PROLEM?
var tabArray = new Array();
tabArray.push( new GInfoWindowTab('Content',
marker.html) );
tabArray.push( new GInfoWindowTab('Save
Point', "<div style=\"width: 300px;font-size: 12px;text-align: left;
\"><a href=\"#\" onclick=\"alert(ch); gMapObj.savePoint(ch);return
false;\">Point Saved</div>") );

//Add the tabs to the info window
marker.openInfoWindowTabsHtml( tabArray );

// Set the marker to loaded so we don't do another request if this
point is selected again
marker.loaded = true;
}
};

// Do the Ajax request
parent.getXMLRequestObj().requestURL( url, 'POST',
postData, requestHandler );
}
} );
}