Bulk && Individual Edit

[achapman77]

Description

We are using jeditable in our B2B app and would like to enable users to both click and edit individual items in a table row as well as click an edit button that toggles all editable items to inputs, then once user is done editing click a save button.

Expected result

Using the onblur jeditable parameter, I was able to pass a function that looked for an ".open" class applied to ".editable" items when the user clicked the "edit-button" and prevent the form from closing. If the ".open" class is not on the ".editable" item the function returns false and ".editable" items work like regular jeditable items.

onblur: function(value){
 jeditablePreventReset(value)
}
function jeditablePreventReset(value) {
        let $target = $(`[data-id="${window.jTarget}"]`);

        if ($target.hasClass('open')) {
            return true;
        } else {
            $target.html(value);
            return false;
        }
    }

Actual result

This function works as expected on the first time through. However, I lose jeditable functionality afterwards. I've tried reinitializing jeditable on the ".editable" items, but does not appear to work. Any ideas ?

Thank you!!!

Environment

jQuery version: 3 Browser: Chrome OS: Windows

[NicolasCARPi]

How do you add the listener?

[achapman77]

Huge thanks for reply Nicolas!!! I'll build out a small example in codepen for easier review.