Using `this` in a js object

Question

I have the following js object:

var livePage = {
    delay: 1000,
    loadTables: function(){
        loadTable($("#vbeTable"),'getUpdateA')
        loadTable($("#vbcTable"),'getUpdateB')
        createAlertDialog();
    },
    setClicks: function(){
        $(".expand").live('click',function(){
            expand($(this).attr('expandvalue'));
        })
        $( ".launch" )
            .click(function(){
                newPopup('index.php',1120,550);
            });
        $('.edit').live('click',function(){
            openColPick($(this).attr('colType'))
        });
    },
    setRightClick: function(){
        $('body').contextMenu('mainmenu', {
              bindings: {
                'o_o': function(t) {
                  thePopupWindowsMain('oo','','',220,150,'right','');
                },
                'o_h': function(t) {
                  thePopupWindowsMain('oh','','',285,385,'left','');
                },
                'launch_prog': function(t) {
                  $(".launch").click();
                },
                'logout': function(t){
                    window.top.location = 'logout.php';
                }
              }
            });
    },
    setWindow: function(){
        $(window)
            .resize(function() {
                $('body').css('height', $(this).height())
                alertToCorner();
            })
            .scroll(function(){$(this).resize()});
        $(window).resize();
    },
    checkLogout: function(){
        $.ajax({
            url: 'getLogin.php',
            dataType: "html",
            success: function(data){
                if($.trim(data) == 'LOGOUT'){
                    window.location = 'logout.php';
                }
            },
            complete: function(){
                setTimeout( function () {
                    livePage.checkLogout();},
                livePage.delay)
            },
            timeout: 2000
        });
    },
    init: function(){
        this.checkLogout();
        this.loadTables();
        this.setClicks();
        this.setRightClick();
        this.setWindow();
        console.log(this);
    }
}

For some reason in the checkLogout: function() I have to use livePage.delay and livePage.checkLogout() When i try using for example this.checklogout() i get the following error in Chrome's Console:

Uncaught TypeError: Object [object DOMWindow] has no method 'checkLogout'

How do i fix this?

Thanks!

ThiefMaster · Accepted Answer · 2011-03-29 17:23:54Z

5

Inside a function this is not bound to whatever it was bound to outside anymore. The easiest solution is assigning to another var using var self = this; or in your case passing it via the context: this option of $.ajax().

answered Mar 29, 2011 at 17:23

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

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

1 Comment

Naftali Over a year ago

this worked :-) i added var self = this; to the top of the checkLogout() fn, and i used self instead of this thanks ^_^

Mark Brown · Accepted Answer · 2011-03-29 17:24:32Z

3

You can try,

 checkLogout: function(){
        var self = this; //reference to the livePage object
        $.ajax({
            url: 'getLogin.php',
            dataType: "html",
            success: function(data){
                if($.trim(data) == 'LOGOUT'){
                    window.location = 'logout.php';
                }
            },
            complete: function(){
                setTimeout( function () {
                    self.checkLogout();},  //need to use self because 'this' no longer refers to livePage in this context
                livePage.delay)
            },
            timeout: 2000
        });
    }

answered Mar 29, 2011 at 17:24

Mark Brown

12.5k8 gold badges30 silver badges32 bronze badges

Comments

John Fisher · Accepted Answer · 2011-03-29 17:26:06Z

1

this is far different in js than in languages like C#. First, it is function-scoped. Secondly (and probably more importantly), you can control what this will be when calling a function. (Check out the "call" and "apply" functions, which are used quite frequently in javascript frameworks.)

answered Mar 29, 2011 at 17:26

John Fisher

22.8k2 gold badges43 silver badges67 bronze badges

Comments

jmccarthy · Accepted Answer · 2011-03-29 17:21:10Z

0

Have a read up on this this keyword in Javascript. In your case this refers to window which like the error says has no method 'checkLogout'.

answered Mar 29, 2011 at 17:21

jmccarthy

4804 silver badges16 bronze badges

Comments

CarlosZ · Accepted Answer · 2011-03-29 17:24:33Z

0

You should add a context: this property to the hash that you send to $.ajax and then in the complete handler call this.checkLogout.

What happens is that JQuery's ajax method will call the handlers using the window as the this context, we can change that by adding a context property to the call.

answered Mar 29, 2011 at 17:24

CarlosZ

8,7492 gold badges23 silver badges16 bronze badges

Collectives™ on Stack Overflow

Using `this` in a js object

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related