3

I have a textarea that I'm able to edit with the jeditable plugin but I do not want the OK and Cancel buttons. I am, instead, going to save the text by clicking away from the textarea (blur). I have that code ready to go but I do not know how to make it work.

Adam
  • 33
  • 1
  • 6

2 Answers2

10

Simply add this to the hash with the settings:

onblur   : 'submit'

Example:

$(document).ready(function() {
    $("#editable1").editable("http://www.domain.com/editdata/", { 
        indicator : "<img src='img/indicator.gif'>",
        type      : 'textarea',
        onblur    : 'submit',
        tooltip   : 'Click to edit...',
        cancel    : 'Cancel'
    });
});

Hope it helps,

Cheers

Marcos Placona
  • 21,468
  • 11
  • 68
  • 93
  • You can omit "cancel" if you don't want the Cancel button, but the user will need to know to hit ESC if they don't want the changes persisted. – tvanfosson Mar 08 '10 at 15:16
  • And that's why I left it in there, and just removed the submit :-) – Marcos Placona Mar 08 '10 at 15:18
  • Thank you VERY much mplacona. I completely missed the onblur – Adam Mar 08 '10 at 15:23
  • I'd advise you to marl the answer as responded then, so it can be used for future reference. Glad it helped you – Marcos Placona Mar 08 '10 at 15:43
  • but how-to force non-save if the user hits tab and selects the cancel button and hits enter ... the expected behavior is that the content will not be saved but yet sith onblur submit it gets saved !!! , which is very counter intuitive ... – Yordan Georgiev Nov 23 '15 at 11:16
0

For those that might be struggling with mobile support due to onblur being triggered prematurely, and need a programmatic way to "cancel" the edit. I added the snip-it below to the start of the jquery.jeditable.js file, under the if('destroy' == target) block.

if ('cancel' == target) {
        //original.reset();
        if ($.isFunction($.editable.types[settings.type].reset)) {
            var reset = $.editable.types[settings.type].reset;
        } else {
            var reset = $.editable.types['defaults'].reset;
        }
        reset.apply(form, [settings, original]);
        return;
    }

It wouldn't be to difficult to modify this into a submit function as well.

Elliott Quick
  • 306
  • 2
  • 7