Object Refrence in javascript does not work Jquery

Question

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

what does "does not work" mean? which line does not work? also bearer.value may be falsy since bearer is a jQuery object and hence .value might not work here — Alex
– Alex, Commented Jul 20, 2014 at 9:30
The commented line in the code sample does not append the child node. bearer.value does not cause any issues It returns the value without any issue. — karthik
– karthik, Commented Jul 20, 2014 at 9:40

JohnB · Accepted Answer · 2014-07-20 10:36:23Z

1

$ 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.

edited Jul 20, 2014 at 10:36

answered Jul 20, 2014 at 9:23

JohnB

13.8k6 gold badges42 silver badges67 bronze badges

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

5 Comments

karthik Over a year ago

i have called the output in this line BUILD.builder.output.append($(BUILD.protoType.expenseDiv(bearer.value))); . but why it doesnt work.

JohnB Over a year ago

No, you haven't called output, as output is not a function. You've populated output with the result of $('#outputBlock') once, and then you're simply reading the stored value. If $('#outputBlock') does not find the element at the time BUILD.builder is created, you won't ever find it with your method, as you do not execute $('#outputBlock') a second time.

karthik Over a year ago

Thanks for the explanation john. I am intializing it only one time using this statement.var BUILD = BUILD || {}; If i intialize Build every time, will my line of code BUILD.builder.output.append($(BUILD.protoType.expenseDiv(bearer.value))); executes with out any issues. Am I getting it correct?

karthik Over a year ago

I understand why my line wont work.but the second mistake does not valid isnt it? john. bearer.value will return the stored values without any issues. Because i could not find any issue in the browser.

JohnB Over a year ago

Well, then you have another variable bearer somewhere, I guess? I am pretty sure that your bearer is not identical to BUILD.builder.bearer.

Collectives™ on Stack Overflow

Object Refrence in javascript does not work Jquery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related