All Jquery UI DatePicker and KnockoutJS Change event on one fires for all

Question

I am using the solution found here:

jQuery UI datepicker change event not caught by KnockoutJS

I have a number of datepicker controls on the page. When one changes, the change event fires for all of them.

RefreshData is a custom function that refreshes data in the ViewModel when the date range is changed.

What am I missing - its been a very frustrating afternoon trying to get this working properly

Here is my knockout binding:

ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().datepickerOptions || {};
    $(element).datepicker(options);

    ko.utils.registerEventHandler(element, "change", function () {
        var observable = valueAccessor();
        observable($(element).datepicker("getDate"));
    });

    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).datepicker("destroy");
    });

},
update: function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    var current = $(element).datepicker("getDate");

    if (value - current !== 0) {
        $(element).datepicker("setDate", value);
    }

    RefreshData(element.id); //Should only fire once, but is firing for every datepicker on the page
}
};

Can you maybe put together a jsfiddle which reproduces your problem? — nemesv, Nov 12 '12 at 12:27
Just seen something interesting - when the first datapicker is changed, update fires once. When the 2nd datepicker is changed, update fires twice — Peter Munnings, Nov 12 '12 at 12:30
Why do you need `RefreshData`? Can you provide body of this function? — Vladimir Posvistelik, Nov 12 '12 at 12:40

score -1 · Accepted Answer · answered Nov 12 '12 at 13:03

OK - found the answer. Really obvious when I took a step back and re-looked at it on StackOverflow (and I was pairing on this - so we both missed it).

The update function is an update on the datepicker, not a specific element. What I needed is the following:

ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().datepickerOptions || {};
    $(element).datepicker(options);

    ko.utils.registerEventHandler(element, "change", function () {
        var observable = valueAccessor();
        observable($(element).datepicker("getDate"));

        RefreshData(element.id); //This now fires only on the change event of the correct datepicker
    });

    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).datepicker("destroy");
    });

},
update: function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    var current = $(element).datepicker("getDate");

    if (value - current !== 0) {
        $(element).datepicker("setDate", value);
    }


}
};

All Jquery UI DatePicker and KnockoutJS Change event on one fires for all

1 Answers1