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;
        }();

Answer 1

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?

Answer 2

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(); });