OOP Principles in Javascript

Question

I am having some trouble working with oo javascript. I am creating a new object public and private methods. Now when I am calling the public method, it cannot access the private variable.

I believe I should return the public methods ( the internet ) but dont really know why. Can someone please explain what I am missing?

function something(){
    var somePanel;  // it is a jquery object to a div

    var createWindow = function(data){
        random.xhr('/chat', 'GET', null, function(res){
            var Container = $("#Container");
            somePanel = $("<div/>").addClass('somePanel').append(res);
            Container.append(somePanel.hide());
        });     
    };

    this.activate = function(){
        somePanel.show().siblings().hide();
    };

    this.init = function(data, fn){
        createWindow(data);
    };
};


connections[data] = new something();  // creates a new something object
connections[data].init(data);   //  which creates just a div object, actually
connections[data].activate();  // has code to show this panel and hide every other panel

When I call the activate() method, it cannot find somePanel. What should I be doing differently? And why?

how do you define somePanel and where? try to explain it a bit more — Abu Romaïssae
– Abu Romaïssae, Commented Oct 26, 2013 at 17:42
this code runs perfectly good; you are not showing us the not working part. But I guess you used var somewhere hiding your original somePanel from something — Adassko
– Adassko, Commented Oct 26, 2013 at 17:43
Also, what is the unused "that" argument for in the activate method? Also, somePanel isn't defined, so I'm guessing you're seeing Uncaught TypeError exceptions due to the value being undefined, no? — jamesmortensen
– jamesmortensen, Commented Oct 26, 2013 at 17:45
possible duplicate of How to return the response from an AJAX call? — user229044
– user229044 ♦, Commented Oct 26, 2013 at 18:22

user229044 · Accepted Answer · 2013-10-26 18:21:41Z

3

Classic problem with asynchronous methods.

You're xhr handler will not have been invoked when you run activate. You need to wait for your xhr handler to run, and then, in a callback, invoke activate.

Something along these lines:

// ...

this.init = function(data, fn){
    createWindow(data, fn);
};

var createWindow = function(data, fn) {
    random.xhr('/chat', 'GET', null, function(res){
        var Container = $("#Container");
        somePanel = $("<div/>").addClass('somePanel').append(res);
        Container.append(somePanel.hide());
        fn();
    });     
};

// ...

connections[data] = new something();
connections[data].init(data, function () { connections[data].activate() });

answered Oct 26, 2013 at 18:21

user229044♦

241k41 gold badges348 silver badges350 bronze badges

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

2 Comments

amit Over a year ago

so my oo skills aren't to blame. glad :)

amit Over a year ago

yes. i had created a callback function from the start for a different reason, however. came in handy. thanks a lot.

Jim Schubert · Accepted Answer · 2013-10-26 18:22:35Z

0

you're setting somePanel in the callback to an async call. You can't be guaranteed somePanel is set by the time you call activate().

edit meagar's answer is the best option from an OO perspective. The rest of my answer is aimed at maintaining the readability you're trying to achieve.

You may want to look into using a module that allows for asynchronous chaining (like async) or promises

answered Oct 26, 2013 at 18:22

Jim Schubert

20.4k5 gold badges64 silver badges69 bronze badges

Collectives™ on Stack Overflow

OOP Principles in Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related