Double-click prevention

[John]

I have a kendo grid with its dataSource, the grid has an editor dialogue with save button. I need to prevent the save button being double clicked. The onSave functions fire when the save button is clicked. I have a requestEnd event that fires when the save is to be re-enabled.

The problem: onSave1 fails 1 time in 100 (I think, its proving very difficult to test). It's based on adding an additional click handler, invoking preventDefault(). Is it fundamentally flawed?

Is onSave2 any better?

onSave1: function (e) {
    $(event.srcElement)
    .addClass("k-state-disabled")
    .bind("click", disable = function (e) { e.preventDefault(); return false; })
    this.dataSource.one("requestEnd", function () {
        $("[data-role=window] .k-grid-update").off("click", disable).removeClass("k-state-disabled");
    })
}

        

onSave2: function (e) {
    $(event.srcElement).removeClass(".k-grid-update").addClass("k-state-disabled").addClass("disabledMarker");
    this.dataSource.one("requestEnd", function () {
        $("[data-role=window] .disabledMarker").addClass(".k-grid-update").removeClass("k-state-disabled").removeClass("disabledMarker");
    })
}

[Stefan]

Hello, John,

Thank you for the provided information.

In this scenario, I can suggest the following approach.

1) on the onSave1 to add the "k-state-disabled" class and to remove the "k-grid-update" as this is the class for which the event listener is attached. This will not interfere with the button appearance.

2) Then on the request end event, the remove the "k-state-disabled" and to add the k-grid-update class.

I hope this approach to prove helpful.

Regards,
Stefan
Progress Telerik

[John]

Thanks for reply - I believe that's what onSave2() was suggesting, its good to know there is a reason behind it. Also should it be removeClass(".k-grid-update") or removeClass("k-grid-update"), when I was experimenting I think i found the '.' was significant?

[John]

revised onSave2() - the extra . was an error


onSave2: function (e) {   

    $(event.srcElement).removeClass("k-grid-update").addClass("k-state-disabled").addClass("disabledMarker");

    this.dataSource.one("requestEnd", function () {

        $("[data-role=window] .disabledMarker").addClass("k-grid-update").removeClass("k-state-disabled").removeClass("disabledMarker");

    })

}

[Stefan]

Hello, John,

The dot "." is needed when a class selector is used with jQuery.

With the removeClass and addClass methods is it not needed, as the method are used specifically for classes and the class indicator is not needed.

I hope the revisited onSave2 is working as expected now.

Regards,
Stefan
Progress Telerik