CODEWITHSUNDEEP
javascriptjqueryoop
user6184150
user6184150

Reputation:

JavaScript - this.update is not a function

Recently i tried to use JavaScript OOP with jQuery, I wrote this code:

var beer = function(){};

$.extend(ntf.prototype, {
    types:{
        '.test':'test',
    },

    init:function() {
        $.each(this.types, function(key, value) {
            this.update(key, value);
        });
    },
    update:function(className, actionName) {
        $(className + ' .event').click(function() {
            $(this).parent().find('.pevent').load('navigate.php?do=create&action=' + actionName);
            alert("TEST");
        }).click();
    },
    pics:{
        add:function(element) {
            $.post("navigate.php?do=nav&action=pics", {
                name:$(element).data('name'),
            });
        }
    }
});
beer.prototype.init();

But, in the console it return this error: Uncaught TypeError: this.update is not a function.

How can i use JavaScript OOP with jQuery in better way, And how can i solve this problem?

Upvotes: 3

Views: 10414

Answers (2)

larz
larz

Reputation: 5766

In addition to what @Ash said, I am a fan of bind

 init:function() {
   $.each(this.types, function(key, value) {
     this.update(key, value);
   }.bind(this);
 },

Upvotes: 1

Ash
Ash

Reputation: 2595

This is the scope issue. Please notice that "this" is different before the "each" function call and inside the call.

You can use the scope by assigning it to a local variable i.e. "me" in this case. 

 init:function() {
    var me = this;
        $.each(this.types, function(key, value) {
            me.update(key, value);
        });
    },

And if you want to see what is the difference between the scopes, just log both and check in the console.

Here first "this" is the global scope whereas the second one (inside the anonymous method) is the local scope.

 init:function() {
        console.log(this);
        $.each(this.types, function(key, value) {
            console.log(this);
        });
    },

You can refer this for more clarification on scope of this : http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/

Upvotes: 3

Related Questions