Question

I’ve got a JavaScript object built like this:

var Dashboard = {
  form: {
    action: function(){
      return $('#upload_form').attr('action');
    }(),
    //snip (more functions)
  }
}

If I call (using Chrome 17 on WinXP) Dashboard.form.action in the Chrome console after the page loaded (I checked the script and the function is there) the result is undefined but, if I then redefine Dashboard.form.action using the same function:

Dashboard.form.action = function(){
  return $('#upload_form').attr('action');
}();

and subsequently call it, it works as expected!

What am I doing wrong? Is this a bug or am I just overthinking it?

Answer 1

Update:

Re your comment below:

actually what I want to do IS assigning the result to the action property…

In the question you said:

If I call…Dashboard.form.action…

which makes it seem like you’re expecting action to be a function (you don’t “call” non-functions).

If you’re expecting it to be a string (the “action” attribute value from #upload_form), then you don’t need to use a function at all. But you do need to be sure that you’re doing it after the #upload_form element already exists in the DOM.

To do that, either put your script below it in the markup (anywhere below it is fine; just before or just after the closing </body> tag works well), or wrap your script in a ready call.

So your code becomes either this if it’s after the #upload_form in the markup:

var Dashboard = {

  form : {
      action : $('#upload_form').attr('action'),

      //snip (more functions)
  }
};

…or this if you want to use ready (anything else using Dashboard will have to wait until ready as well):

jQuery(function($) {
    var Dashboard = {

      form : {
          action : $('#upload_form').attr('action'),

          //snip (more functions)
      }
    };
});

Note that in the second case, Dashboard will no longer be a global variable. That’s a good thing, but if you need it to be global for some reason, you can export it:

jQuery(function($) {
    var Dashboard = {

      form : {
          action : $('#upload_form').attr('action'),

          //snip (more functions)
      }
    };

    // Export the global
    window.Dashboard = Dashboard;
});

Just make sure nothing tries to use Dashboard before ready has fired.

---

Original answer:

You have an extra pair of () on that:

action: function(){return $('#upload_form').attr('action');}()
//                                              here -------^^

By putting them there, you call the function immediately, and assign the result of calling it to the action property. You just want to assign the function itself to the property, so don’t put the () at the end to call it:

action: function(){return $('#upload_form').attr('action');}

This is for exactly the same reason you wouldn’t use () here (let’s assume you have a function called foo) if you want f to refer to foo:

var f = foo;

If you said

var f = foo();

…you’d be calling foo, not referring to it.