In javascript callback function not getting value of existing object property

Question

I'm loading js by creating script tag on the fly, I have written a callback function on script load, but when functions get called after js get loaded, I can't access my object property, when I checked it in firebug the value is missing. Below is my code please answer what is the problem in my code, or is there a different method for doing the same.

obj = {
     cont: null,    
     create:function(){
       this.cont = document.createElement('iframe');
       this.cont.style.setProperty('background-color', '#FFFFFF', 'important');
       this.getJs();
     },

getJs:function(){
    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = 'myjs.js';

    oScript.onload = obj.show;//most browsers

    oScript.onreadystatechange = function() {// IE 6 & 7
        if (this.readyState == 'complete') {
            obj.show();
        }
    }
    oHead.appendChild(oScript);        
},

show:function(){
    alert(this.cont);//this.cont is not available when js load and show function get called as a
}   }obj.create();

You can set the scope of the event function. See this question stackoverflow.com/questions/183214/javascript-callback-scope — PiTheNumber
– PiTheNumber, Commented Nov 23, 2011 at 11:21

georg · Accepted Answer · 2011-11-23 11:10:58Z

2

This

   oScript.onload = obj.show;//most browsers

doesn't pass the context (obj) to the show function. You need to make a closure like

   oScript.onload = function() { obj.show() }

or use bind if your target browser supports it:

   oScript.onload = obj.show.bind(obj)

Most JS frameworks also include bind or a similar function.

answered Nov 23, 2011 at 11:10

georg

216k57 gold badges324 silver badges401 bronze badges

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

2 Comments

Pankaj Khairnar Over a year ago

Thank you for your answer, it is working with "oScript.onload = function() { obj.show() }" but It is not working when I use this.show() instead of obj.show() why is it so?

Tikhon Jelvis Over a year ago

Basically, when you use a function as an event listener, this gets dynamically bound to window when the function is called. So in the function containing this.show(), this is actually window rather than obj.

Tikhon Jelvis · Accepted Answer · 2011-11-23 11:11:28Z

1

The issue is that this is dynamically scoped. I think this should work:

oScript.onload = function () {obj.show()};

answered Nov 23, 2011 at 11:11

Tikhon Jelvis

68.3k19 gold badges183 silver badges217 bronze badges

Collectives™ on Stack Overflow

In javascript callback function not getting value of existing object property

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