Scope problem - there HAS to be a better way!

[JohnT]

This seems crazy to me, look at what I have to do in order to pass the responseText from YAHOO.util.Connect.asyncRequest to one of my functions in my class.

EXPERTS please step in and point a newbie in the right direction.


Specifically look at the changeTemplate function, and look at how I had to use the variable THAT .

Is there a better way ???






/**
* @author Trope
*/
function hat(o_layout){
/*--------------------*/
/* Private Properties */
/*--------------------*/
// None yet.

/*-------------------*/
/* Public Properties */
/*-------------------*/

if(typeof(o_layout) == "object"){

/* This check is in place in case
* I want to debug from a seperate file
* without passing this layout object
*/
this.theLayout = o_layout;

}

/*-------------------*/
/* Our Main Object */
/*-------------------*/
this.customerHat = {
"customer": null,
"template": {
templateNumber : null,

templateImage : {
tFront : null,
tBack : null,
tLeft : null,
tRight : null

},
templateSize : {
templateWidth : 0,
templateHeight : 0
}
},
"pictures" : [
{
imageName : null,
imageSize : null,
imageView : null,
imagePosition : {
imageX : 0,
imageY : 0
}
}
],
"Text": [
{
textType : null,
textFont : null,
textSize : null,
textView : null,
textPosition : {
textX : 0,
textY : 0
}

}
]
};

/*-------------------*/
/* Public Methods */
/*-------------------*/
that = this;
this.getNumberOfImages = getNumberOfImages;
this.changeTemplate = changeTemplate;
this.designInProgress = designInProgress;
this.updateHatTemplateObject = updateHatTemplateObject;
}
/**
* Get the number of images in the hat design
*
* @method getNumberOfImages
* @static
* @return {Integer} Number of pictures (images) in the design
*
*/
function getNumberOfImages(){

var numberOfImages=0;

for(i=0; i<this.customerHat.pictures.length; i++){
if(this.customerHat.pictures[i].imageName != null ) {
numberOfImages++;
}
}

return numberOfImages;
}

/**
* Changes the design template.
*
* @method changeTemplate
* @static
* @param {Object} t target element
* @return {Boolean} True if the template change
* operation was successful.
*/
function changeTemplate(t){

var templateSrc = _getImageName(t);

if(this.designInProgress() == true) {

var agree = confirm("You have a design in progress. Are you sure you want to start over?");
if(!agree){
return false;
}
}

var sUrl = "get_template.php?src="+templateSrc;

var handleSuccess = function(o){
that.updateHatTemplateObject(o.responseText);
};

var handleFailure = function(o){
alert("Failure");
};

var callback =
{
success:handleSuccess,
failure: handleFailure
};

var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);

}


/**
* Checks to see whether or not the user
* has started their design.
*
* @method designInProgress
* @static
* @return {Boolean} True if the user has started a design
* False if they have not started yet
*/
function designInProgress(){

var o_hat;
o_hat = this.customerHat;

if( o_hat.template.templateNumber != null ){
return true;
}

return false;

}



/**
* Checks to see whether or not the user
* has started their design.
*
* @method _getImageName
* @private
* @param {Object} o html IMG element
* @return {String} Returns the image name
*
*/
function _getImageName(o){
return o.src.match(/\/([^\/]+)$/)[1];
}


/**
* Get the responseText and
* update the customerHat object
* within this class
*
* @method updateHatTemplateObject
* @private
* @param {Object} o JSON response from fn changeTemplate
* @return {Boolean} True if successful
*
*/
function updateHatTemplateObject(o){

alert(o);

}

[tryanDLS]

You can pass scope in the callback



var callback =
{
success:handleSuccess,
failure: handleFailure,
scope: this
};

[JohnT]

I think I tried that and was returned a reference to the CALLBACK object.

I could be mistaken, as I tried a hundred things.

I sure will try again! Thanks.

[tryanDLS]

Are you using Firebug or another debugger to step thru the code? Use the debug versions or the individual yui files so that you can step into the asyncRequest code - it's very well layed out and easy to follow.

[JohnT]

yes sir, I am. I console.log(ged) and console.info(ed) until my fingers were raw.

I am sure your solution , using the scope property will work. Now that I think about it, I forgot to declare the method in my class, so it's no wonder I was getting undefined.

This is my first javascript class I have ever written, so there is a learning curve.

BUT... it's starting to click in, and so cool. My g/f will tell you otherwise (she hasn't seen or heard from me since I have really began using YUI and YUI-EXT) , however. LOL

Thank you.

JohnT.