JavaScript "is not a function" error when calling defined method

Question

This is my code:

request_xml: function()
        {
        http_request = false;
                    http_request = new XMLHttpRequest();
                     if (http_request.overrideMimeType) 
                            {
                            http_request.overrideMimeType('text/xml');
                            }
                          if (!http_request)
                          {
                                return false;
                          }
                        http_request.onreadystatechange = this.response_xml;
                        http_request.open('GET', realXmlUrl, true);
                        http_request.send(null);
                        xmlDoc = http_request.responseXML;
                        
},



response_xml:function ()
    {
        if (http_request.readyState == 4)
        {
            if(http_request.status == 404 && countXmlUrl<=3)
            {
                countXmlUrl++;
                
                realXmlUrl = xmlUrl[countXmlUrl];
                this.request_xml();
            }
            if (http_request.status == 200)
            {
                xmlDoc = http_request.responseXML;
                alert("need to update3");
                this.peter_save_data();
            }
            
        }
    },

peter_save_data:function()
    {
// removed function code
},

Strangely, the alert fires without a problem but the function call underneath gives me this error:

Error: this.peter_save_data is not a function

Calling the same function from another function elsewhere works fine.

I would imagine it's because you're using this in the wrong scope. Have you tried passing it to the peter_save_data() function but calling it like objWhatever.peter_save_data(this)? — Jared Farrish
– Jared Farrish, Commented Jun 11, 2011 at 18:49
That's not the full code. One important piece of the puzzle that is missing is how response_xml is being called -- this is important, because it will change what this is (see Jared's comment). Remember that this can be thought of as "the receiver of the method call". — user166390
– user166390, Commented Jun 11, 2011 at 18:52
@anirudh4444 Imagine the above code comes from a prototype declaration. Thus this is the most general form that can be used. — user166390
– user166390, Commented Jun 11, 2011 at 18:53
Ok, edited the post for clarity... I have no problems pasting the full code, but its a large file... — Ryan
– Ryan, Commented Jun 11, 2011 at 18:57

Anirudh Ramanathan · Accepted Answer · 2013-03-27 10:57:05Z

30

You could do this, right before you call the XML generation.

var that = this;

and later...

that.peter_save_data();

Because this frequently changes when changing scope by using a new function, you can't access the original value by using it. Aliasing it to that allows you still to access the original value of this.

edited Mar 27, 2013 at 10:57

answered Jun 11, 2011 at 18:53

Anirudh Ramanathan

46.8k24 gold badges137 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jared Farrish Over a year ago

I would consider that a potentially unnecessary global variable, which could be difficult to debug (for instance, if it is already used by something else or set elsewhere and not cleared out when the method is complete).

Anirudh Ramanathan Over a year ago

That variable does not need to be global. It needs to be declared locally, only before the context changes.

Cloud Over a year ago

Thanks so much this fix my problem!

score 6 · Accepted Answer · 2011-06-11 19:21:23Z

6

One important piece of the puzzle that is missing is how response_xml is being called. This is important, because it will change what this is (see Jared's comment).

Remember that this can be thought of as (roughly) "the receiver of the method call". If response_xml is passed directly to use as a callback then of course it won't work -- this will likely be window.

Consider these:

var x = {f: function () { return this }}
var g = x.f
x.f() === x    // true
g() === x      // false
g() === window // true

Happy coding.

The "fix" is likely just to change how response_xml is being called. There are numerous ways to do this (generally with a closure).

Examples:

// Use a closure to keep he object upon which to explicitly invoke the method
// inside response_xml "this" will be "that",
// which was "this" of the current scope
http_request.onreadystatechange = (function (that) {
   return function () { return that.response_xml() }
}(this)

// Or, alternatively,
// capture the current "this" as a closed-over variable...
// (assumes this is in a function: var in global context does not create a lexical)
var self = this
http_request.onreadystatechange = function () {
   // ...and invoke the method upon it
   return self.response_xml()
}

Personally, I would just use jQuery or similar ;-)

edited Jun 11, 2011 at 19:21

answered Jun 11, 2011 at 18:55

user166390

3 Comments

user166390 Over a year ago

@Ryan Updated answer for a fix ;-)

Ryan Over a year ago

I voted up your comment, but for a newb like me its a bit hard to understand. Although both solutions are working i am using the below one (simpler in my head) so i have accepted that one as the answer. Hope you dont mind, wish i could pick two answers here, and thanks!

user166390 Over a year ago

@Ryan It's okay :-) Hopefully my examples were a bit helpful and your problem is solved. The important thing is to keep in mind that methods in JavaScript are not bound to an object -- they are just normal functions! The this is only correctly propagated through with how they are invoked. (It can be altered with call or apply or changing the "receiver" as shown).

Itay Moav -Malimovka · Accepted Answer · 2011-06-11 19:00:53Z

If you want a class-like behavior, use the right syntax, The libraries that use that, are using JSON to pass a parameter to a function that makes a class out of it.

function MyClass(CTOR paarams){
    var response_xml=function ()
    {
        if (http_request.readyState == 4)
        {
            if(http_request.status == 404 && countXmlUrl<=3)
            {
                countXmlUrl++;

                realXmlUrl = xmlUrl[countXmlUrl];
                this.request_xml();
            }
            if (http_request.status == 200)
            {
                xmlDoc = http_request.responseXML;
                alert("need to update3");
                this.peter_save_data();
            }

        }
    }

    var peter_save_data=function()
    {
       // removed function code
    }
}

var Test = new MyClass(somthing,another_something);
Test.response_xml();
//etc etc.

Or, use the libraries like Mootools where you can do it as JSON:

var T = new Class({
    response_xml:function ()
    {
        if (http_request.readyState == 4)
        {
            if(http_request.status == 404 && countXmlUrl<=3)
            {
                countXmlUrl++;

                realXmlUrl = xmlUrl[countXmlUrl];
                this.request_xml();
            }
            if (http_request.status == 200)
            {
                xmlDoc = http_request.responseXML;
                alert("need to update3");
                this.peter_save_data();
            }

        }
    },

    peter_save_data:function()
    {
      // removed function code
    }

});
var X = new T();//etc etc

Collectives™ on Stack Overflow

JavaScript "is not a function" error when calling defined method

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related