Use X-Editable Inline In A Table

Question

I want to use xeditable edit table rows inline on a button click.

Here is my jsfiddle: https://jsfiddle.net/nah26L67/

Here is my code:

$('.edit').on('click', function () {
     var id = $(this).attr('data-edit-id');
     $('span[data-id=' + id + ']').editable('toggle');
     $('span[data-id=' + id + '][data-type=date]').editable('toggle');
});

The desired result is that when you click 'Edit' the entire row will show the xeditable inline text box where you can enter text along with the checkmark and the exit buttons.

The problem is my implementation just isn't working at all.

Does anyone have any idea why?

Answer 1

I found the answer to my question here: http://jsfiddle.net/xBB5x/348/

I needed to set the defaults for it like so:

var defaults = {
    mode: 'inline', 
    toggle: 'manual',
    showbuttons: false,
    onblur: 'ignore',
    inputclass: 'input-small',
    savenochange: true
};
$.extend($.fn.editable.defaults, defaults);