I wrote my first Javascript with OOP. And I am trying to call its instance method from another method within same object.

When I call begin() method like below which is fired after closing the dialog, I get "this.after() is not a function".

If other language like Java, it should just process without any problem. Is there anything I'm missing?

I am using jQuery bind() for dialog close event so "this" must be pointing to not class itself.

function MyHandler() {

    this.begin = function() {
            $("#hiddenIframe").dialog({
                autoOpen: true,
                height: 300,
                width: 300
            });


            $("#hiddenIframe").bind("dialogclose", function() {
                this.after();
            });
    }

    this.after = function() {
        //do something here
    }
}

var myInstance = new MyHandler();
myInstance.begin(); //error: this.after() is not function ???

I wrote my first Javascript with OOP. And I am trying to call its instance method from another method within same object.

When I call begin() method like below which is fired after closing the dialog, I get "this.after() is not a function".

If other language like Java, it should just process without any problem. Is there anything I'm missing?

I am using jQuery bind() for dialog close event so "this" must be pointing to not class itself.

function MyHandler() {

    this.begin = function() {
            $("#hiddenIframe").dialog({
                autoOpen: true,
                height: 300,
                width: 300
            });


            $("#hiddenIframe").bind("dialogclose", function() {
                this.after();
            });
    }

    this.after = function() {
        //do something here
    }
}

var myInstance = new MyHandler();
myInstance.begin(); //error: this.after() is not function ???

• javascript
• oop

Share Improve this question Follow edited Dec 22, 2011 at 6:11 Meow asked Dec 22, 2011 at 5:54 MeowMeow 19.2k5252 gold badges143143 silver badges183183 bronze badges 4

• JavaScript's this is radically different to Java's, but still your code example should work. What happens if you call myInstance.after(); instead of myInstance.begin();? – nnnnnn Commented Dec 22, 2011 at 5:57
• I'm sorry the example above works. (I simplified code a bit so it must have been the changes I made) I will edit the code. – Meow Commented Dec 22, 2011 at 6:01
• I don't get this error. Is there more context? What version of JavaScript engine are you using? – chuckj Commented Dec 22, 2011 at 6:01
• Sorry guys I have modified the code and now it really show the error. – Meow Commented Dec 22, 2011 at 6:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Try this:

function MyHandler() {

    var thisInstance = this;

    this.begin = function() {
        $("#hiddenIframe").bind("dialogclose", function() {
             thisInstance.after();
        });
    }

    this.after = function() {
        //do something here
    }
}

Thank you, Juicy Scripter. I don't know how jquery dialog calls dialogclose event handlers, but the described error indicates that context of the call of anonymous function with this.after(); inside it is not MyHandler, and this means something else there. To be explicit about whose method after is, define local variable in MyHandler constructor and use this variable when you need to call MyHandler instance methods inside functions that will be called in unknown context.

jQuery binded functions executed in context to what they binded.

You have #hiddenIframe as this in your event listener

You probably want to store pointer to your instance in some variable and use it later in contexts other than instance itself.

I don't think any problem in you code. It works !!
There is also another simple way of representing the same Object i.e. in the form of JSON.

See the code below:

<script>
     var MyHandler= {
                begin:function() {
                    console.log('inside begin');
                    after();
                },
                after:function() {
                    alert('inside after');
                }
      };
     var myInstance = MyHandler;
     myInstance.begin();
</script>

Dialog Box code with OOP java script function:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://jqueryui./themes/base/jquery.ui.all.css">
<script type="text/javascript">
function MyHandler() {
    this.begin = function() {       
            $("#info").show().dialog("open");
            $("#info").bind("dialogclose", function() {
                this.after();
            });             
    }
    this.after = function() {
            $("#info").dialog("destroy");
    }
}
function showDialog(){
    var myInstance = new MyHandler();
    myInstance.begin(); 
}
$(document).ready(function() {
   var info=$("#info");
   info.dialog({
           autoOpen: false,      
           height: 300,
           width: 300,
           title:'Hello Dialog',
           autoClose:false,
           closeOnEscape: true

       });
    $("a").click(showDialog);   
});
</script>
</head>
<body>
<a href="#" onclick="showDialog()">Show the Dialog</a>
<div id="info" style="display:none;font-size:10px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>