Objects, Callback functions and Variable Scope

F

Funktopia

I am trying to convert some of my javascripts into a class and am
running into difficulties which i think are related to variable scope.

Basically I have a constructor function for a calendarInput class that
takes 4 parameters, the first is a reference name/number for this
input. I also have some functions for importing my PHP classes into
Javascript using AJAX (properties only. still trying to get methods
working but that's another story!). The relevant function is called
call_object_method(classname, methodname, createparams, methodparams,
post, callbackfunction). This creates an instance of the specified PHP
class using the parameters in createparams. It then calls the
specified method using the parameters in methodparams. The result is
passed back to the
javascript function specified in the callbackfunction parameter (ie the
value of xmlhttp.onreadystatechange is set to callbackfunction before
xmlhttp.send() is called)

The function i am trying to fix is called show (x,y) which creates the
html for the calendarInput and displays it at co-ordinates x, y.

So, my code is as follows:

function calendarInput(calendarid, target, displaytarget, value)
{
this.calendarid = calendarid;
this.target = target;
this.displaytarget = displaytarget;
this.value = value;

this.show = function(x, y)
{
<!--// bunch of init and prepping code. includes creating
createparams and methodparams arrays //-->

call_object_method("cms_calendar", "getcalendarview",
createparams, methodparams, false, this.showcallback);

}

this.showcallback = function()
{
alert(this);
<!--//code to create html//-->
}

}

I know i've cut out most of the innards of this. This is because I
have already tested these functions and had the calendarInput working
outside of a class, hence am pretty sure that this is ok (plus it runs
to almost 1000 lines these days!!). My problem is that when I call the
show method, the alert on the first line of the callback function
returns the function showcallback instead of (as i was expecting) the
instance of the calendarInput object. Whilst this kinda makes sense I
can't figure out how to reference the Object instead. I have tried
'this.parent' but this returned undefined. I have tried changing the
way i reference the callback function (ie the final parameter of
call_object_method) but no joy. If anyone has any tips, hints, ideas
etc that would be much appreciated. I've been banging my head against
a brick wall on this one all day!!
 
M

mitch

The answer involves something called Javascript closures. Here's an
article on it that contains probably more than you want to know:

http://jibbering.com/faq/faq_notes/closures.html

The easy way to get your alert to work is the following:

var me = this;
this.showcallback = function() {
alert(me);
// code using "me" to refer to the enclosing object
}

Inside the showcallback function, "this" no longer refers
to the object you think it does, it refers to the function itself!

Have fun with closures :)

- Mitch
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top