Question

i’ve a jquery (UI) App here where the whole JQuery Code gets a little bit messy, so i started to think around how to structure this in a little bit fancier way… i read a blog post somewhere, that “oop” – in a java way can be achieved by doing some kind of this:

function RangeSelector(product_id) {
    this.product_id = product_id;
    this.start_point = "#from_" + product_id;
    this.end_point = "#to_" + product_id;
}
RangeSelector.prototype.myFunction = function() { }

the whole code can be found here.

My Range Selector “Class” should hold two jquery ui datetimepickers that are responsible to let the user select a date time range for a shop where you can rent products

The problem that i currently have is the following: the date time pickers get callback functions (“unavailableFrom”, “unavailableTo”) where i’d like to do some specific things and then call a generic “unavailable” to function.
The error message is:

TypeError: 'undefined' is not a function (evaluating 'this.unavailable(date)')

I looked about that with firebug and it seems, that “this” not my object of the RangeSelector, but the HTML Element on what the datetimepicker is working.
My Question is: how can i access this method “unavailable”?

By the way, i tell you the whole story in here, because i don’t think, that the structure that i chose here is the right way to go. How do you handle these kind of things, where you have more than one html elements that have a common meaning and you would like to aggregate them?

Answer 1

If you need to set this to a different value, you can use jQuery.proxy to do that. (Or in an ES5-enabled environment, you can use the new Function#bind function.) proxy accepts a function and value to use for this, and returns a function that will call the original with this set to that value.

So for instance, suppose you have your RangeSelector and you want click to trigger myFunction on a specific instance:

var r = new RangeSelector(/* ...args...*/);
$("some_selector").click($.proxy(r.myFunction, r));

Now, when r.myFunction is called, within the call, this will be a reference to the r object. (If you need to know which DOM element was clicked, have myFunction accept the event argument that jQuery passes it, and use event.target.)

For completeness, the above using Function#bind (if the browser supports ES5 features, or you’ve included an ES5 shim [since Function#bind is shim-able]):

var r = new RangeSelector(/* ...args...*/);
$("some_selector").click(r.myFunction.bind(r));

More to explore (on my blog):

• Mythical methods
• You must remember this

---

The jQuery UI datepicker‘s onSelect is a bit of a pain, because they don’t give you the event object and so you don’t have access to event.target. Your best bet there is probably a closure that passes the element on:

var r = new RangeSelector(/* ...args...*/);
$("some_selector")..datepicker({
    onSelect: function(dateText, inst) {
        return r.myFunction(dateText, inst, this);
    }
});

…where myFunction accepts dateText, inst, and element arguments.

Live example | source

That works because the function we’re assigning to onSelect is a closure over the environment containing the r variable.

Closures are frequently misunderstood; FWIW, another blog entry: Closures are not complicated