Object oriented javascript bug

Question

       var U = function(){
            this.div = document.createElement('DIV');
            this.div.id= 'oooofffff';
            this.div.innerHTML = '<form action=""><input type="file" name="trainingReport"  /><input type="submit" value="Upload" id="Upload" /></form>';
            document.body.appendChild(this.div);
            $(this.div).css({'text-align':'center','padding-top':'25px'});
            $('input#Upload',this.div).button();
            $(this.div).dialog({
                    title:'Upload Summer Training Report',
                    resizable:false,
                    position:['center',300],
                    show:'blind',
                    hide:'explode',
                    autoOpen:false
                });
        }
        U.uploadReport = function(ApplicationID){
            console.log(this.div); //outputs undefined
            $(this.div).dialog("open");
        }
        $(document).ready(U);

what is wrong with my object? when i call U.uploadReport() function, it doesn't see this.divobject. What should i do to fix it?

Note: please don't offer that i can use $('#oooofffff').dialog('open')

edit: version 2:

var U = function(){
            var that = this;
            that.div = document.createElement('DIV');
            that.div.id= 'oooofffff';
            that.div.innerHTML = '<form action=""><input type="file" name="trainingReport"  /><input type="submit" value="Upload" id="Upload" /></form>';
            $(document).ready(function(){U.initialize()});


            that.uploadReport = function(ApplicationID){
                console.log(that.div);
                $(that.div).dialog("open");
            }
            that.initialize = function(){
                document.body.appendChild(that.div);
                $(that.div).css({'text-align':'center','padding-top':'25px'});
                $('input#Upload',that.div).button();
                $(that.div).dialog({
                    title:'Upload Summer Training Report',
                    resizable:false,
                    position:['center',300],
                    show:'blind',
                    hide:'explode',
                    autoOpen:false
                });
            }
            return that;
        }();

You are somehow trying to use a normal function as instance which does not work.... this inside U refers to document and in U.uploadReport to the window object. I recommend to read: developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects — Felix Kling
– Felix Kling, Commented Aug 10, 2011 at 12:42
if i make it var U = new function(){... does it work? // edit: i tried but it doesn't work ;) — Yunus Eren Güzel
– Yunus Eren Güzel, Commented Aug 10, 2011 at 12:44
You can only pass a function to $(document).ready, not an object. — Felix Kling
– Felix Kling, Commented Aug 10, 2011 at 12:45
No, actually your are passing a function as an object i.e. $(document).ready(function(){alert('x')}) — Yunus Eren Güzel
– Yunus Eren Güzel, Commented Aug 10, 2011 at 12:47
I don't know what you mean. Yes, functions are special kinds of objects, but not every object is a function. There is nothing such as passing a function as an object. — Felix Kling
– Felix Kling, Commented Aug 10, 2011 at 12:48

GolezTrol · Accepted Answer · 2011-08-10 12:47:16Z

3

Your class declaration is wrong. It should (could) be like this:

function UType() {
  // Your class code
}

UType.prototype.uploadReport = function()
{
  // Your method code
}

// New instance, assign it to U.
var U = new UType();

// Call method directly
U.uploadReport();

// Call inside wrapper function, to pass it to JQuery
$(function(){ U.uploadReport(); });

answered Aug 10, 2011 at 12:47

GolezTrol

116k19 gold badges186 silver badges215 bronze badges

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

2 Comments

Yunus Eren Güzel Over a year ago

thanks for you answer, but actually i would like to use a static class :)

GolezTrol Over a year ago

Ok, that didn't become clear in the original question. :) A nice little example of static classes in JS can be found here: justjs.org/js-oop/static-methods-in-javascript

Richard Dalton · Accepted Answer · 2011-08-10 13:10:46Z

0

You object isn't quite created properly and this.div inside uploadReport is not in the correct scope.

Try changing it to this:

var U = function(){
    var that = {};
    that.div = document.createElement('DIV');
    that.div.id= 'oooofffff';
    that.div.innerHTML = '<form action=""><input type="file" name="trainingReport"  /><input type="submit" value="Upload" id="Upload" /></form>';
    document.body.appendChild(that.div);
    $(that.div).css({'text-align':'center','padding-top':'25px'});
    $('input#Upload',that.div).button();
    $(that.div).dialog({
        title:'Upload Summer Training Report',
        resizable:false,
        position:['center',300],
        show:'blind',
        hide:'explode',
        autoOpen:false
    });

    that.uploadReport = function(ApplicationID){
        console.log(that.div);
        $(that.div).dialog("open");
    }
    return that;
}();
$(document).ready(U);

Note that it returns itself to give you the object and the function has () after it so it is executed immediately. So U actually becomes the result of the function which I think is what you want?

edited Aug 10, 2011 at 13:10

answered Aug 10, 2011 at 12:45

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

4 Comments

Felix Kling Over a year ago

I would not do this. This assigns a new property to the document element.

Yunus Eren Güzel Over a year ago

it is not possible to do this by creating static class, is it?

Richard Dalton Over a year ago

@Felix Yeah, you're right. Think I just had this stuck in my head from the original code. Is it better now?

Felix Kling Over a year ago

Mmmh. You are still passing an object to ready(). I don't think this will work.

Collectives™ on Stack Overflow

Object oriented javascript bug

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related