CODEWITHSUNDEEP
javascriptjquery
karthik
karthik

Reputation: 473

Object Refrence in javascript does not work Jquery

I am trying to append the parent node with child node using jquery and object oriented javascript.

Can you please explain why the commented line in the buildexpenseTable function block does not work.

But the next line works fine.

var BUILD = BUILD || {};

BUILD.protoType = {
    expenseDiv : function(bearer){
        return "<P>hai</p>";
    }
}

BUILD.builder = {
    bearer : $("#bearer"),
    desc : $("#description"),
    amount : $("#amount"),
    output : $("#outputBlock"),
    buildExpenseTable : function (){
        //BUILD.builder.output.append($(BUILD.protoType.expenseDiv(bearer.value)));
        $("#outputBlock").append($(BUILD.protoType.expenseDiv(bearer.value)));
    }
}

Upvotes: 0

Views: 50

Answers (1)

JohnB
JohnB

Reputation: 13743

$ is a function. output is populated (and thus $('outputBlock') is executed) when BUILD.builder is created. If you use the second statement, $('outputBlock') is executed when buildExpenseTable is called.

Most probably, BUILD.builder is initialized before the page has been entirely loaded and the DOM has been built, so BUILD.builder.output will be empty.

Note that, further, the way you do it will cause $('#bearer'), $('#description'), etc. to be executed only once, namely at the time BUILD.builder is created; thus any subsequent changes to the DOM are ignored. That's probably not what you want?

You can solve the problem by doing this:

BUILD.builder = {
    bearer : function () { return $("#bearer") },
    desc : function () { return $("#description") },
    amount : function () { return $("#amount") },
    output : function () { return $("#outputBlock") },
    buildExpenseTable : function (){
        BUILD.builder.output ().append($(BUILD.protoType.expenseDiv(BUILD.builder.bearer ().value)));
    }
}

If you are absolutely sure that you really want a "once-and-forever" initialization, put the initialization of BUILD.builder into a $(document).ready (...) handler, yet I would rather not do that.

Second mistake: You probably won't find bearer, as you did not indicate the object where to look for it.

Upvotes: 1

Related Questions