calling chain method in javascript

Question

I am using the following code but it is constantly giving me errors :

TypeError: container("accounts").atPosition("#left-top") is undefined

the code is :

function container(name, position) {
    return {
        pos: null,
        atPosition: function(position) {

            $(position).html(this.newContainer());
            //$(position+" .main").html("yes");
            this.pos = position;
        },
        populateData: function(rdata) {
            $("#left-top .main").html(rdata);
        },
        newContainer: function() {
            //alert(this.pos);
            return '<h3>' + name.toTitleCase() + '</h3>\
                <div class="main">\
                </div>';
        }
    };
}

container('accounts').atPosition('#left-top').populateData("yahoo!!!!");

Why am I receiving this error and how can I fix it?

atPosition returns nothing (undefined), so you can't call .populateData on it — Bergi
– Bergi, Commented Oct 24, 2012 at 12:48
I had written an answer before that is a simple example of chaining function that doesn't use jQuery. stackoverflow.com/questions/11272758/… — Alvin Wong
– Alvin Wong, Commented Oct 24, 2012 at 12:49

Alvin Wong · Accepted Answer · 2012-10-24 12:55:48Z

7

You supposed to return this from functions for chaining. By default function return undefined (if you dont use new operator) . by returning this from function which don't have any thing to return will help in chaining.

function container(name, position) {
    return {
        pos: null,
        atPosition: function(position) {
            $(position).html(this.newContainer());
            //$(position+" .main").html("yes");
            this.pos = position;

            return this;
        },
        populateData: function(rdata) {
            $("#left-top .main").html(rdata);
            return this;
        },
        newContainer: function() {
            //alert(this.pos);
            return '<h3>' + name.toTitleCase() + '</h3>\
                <div class="main">\
                </div>';
        }
    };
}

edited Oct 24, 2012 at 12:55

Alvin Wong

12.5k5 gold badges55 silver badges78 bronze badges

answered Oct 24, 2012 at 12:43

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

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

Comments

Quentin · Accepted Answer · 2012-10-24 12:43:46Z

2

The function you assign to atPosition doesn't have a return statement.

So when you call atPosition('#left-top'), you get the default return value of undefined

You need to return the object you wish to call populateData on (which should be this)

answered Oct 24, 2012 at 12:43

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

watashiSHUN · Accepted Answer · 2016-05-16 23:26:36Z

function chaining is not a special javascript syntax, if you want, you can implement it in Java, Python or anything that supports OOP.

a.functionX().functionY() works because functionX() returns again an object which has a method called functionY()

in your case, functionX() should return the same object it is invoked on, therefore return this; will fix your problem

But this is not the end of the story!!!

@Rich S mentioned in his answer:

In order to make chaining work, you need to "return this;" at the end of any functions you want to chain.

which is not necessary true, chaining will work as long as you return an object(or any object), here is an example:

var str ="abc";
var strFromChain = str.replace('a','x').toUpperCase();
// use function chainning
document.write(strFromChain+'\n');
// result should be XBC

var str1 = "abc";
str1.replace('a','x');
var str1NotFromChain = str1.toUpperCase();
// if replace() returned this, str1NotFromChain should also be XBC
document.write(str1NotFromChain)
// but is it???????

Obviously replace() method of str did not return this instead it returned a new string with a different value, and this is easy to understand since strings are immutables, no matter what methods you call on str, its value will always be "abc".

I am just making a point here, it's not necessary for chaining method to return this, it can return a new object if it wants to. Even though online tutorials teach you to use this when implementing chaining functions (ie javascript.issexy) you should always pay attention to what is being returned when using a third party library(ie route chainning in expressjs)

Rich S · Accepted Answer · 2012-10-24 12:48:27Z

0

Chaining doesn't happen automatically.

In order to make chaining work, you need to "return this;" at the end of any functions you want to chain.

In reality, all you're doing is calling the function on whatever you return. If you do "return this;" then you end up with a nice chaining syntax that affects the same object.

The jQuery developer guide is a good place to get quality JavaScript tips from, given your question, I'd recommend looking at http://docs.jquery.com/Plugins/Authoring#Maintaining_Chainability

answered Oct 24, 2012 at 12:48

Rich S

4284 silver badges8 bronze badges

Collectives™ on Stack Overflow

calling chain method in javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related