Question

I am using jquery DataTables and jEditable to allow inline editing of EACH CELL of my table data simply by clicking on the text on that cell. However, i worry that user might not know what they need to do in order to edit the data, so i wish to use an edit icon to function as a trigger
I create a custome event “edit” for each editables:

// Normal text field
    $('.textfield').editable('@(Url.Action("Edit", "Home"))',
    {
        indicator: 'saving...',
        event: 'edit',
        tooltip: 'Double click to edit...',
        style: 'inherit'

    })

Then i bind the icon as the trigger to the event:

$("#trigger").bind("click", function () {
        $(this).prevAll().each(function () {
            $(this).trigger('edit');
        });
    });

But i get a weird behavior, once i click on the icon, all cells in the row appear to be editable, but the datepicker will automatically pop up as well. also, some cell will then jump back to normal text field, the whole thing just like a mess..
Any idea what can I do??
Really thanks for any help..

Answer 1

As you didn’t post the HTML, I am assuming you have an edit button after each .textfield. If that’s the case, you just want to trigger the edit event on one editable element, instead of all elements in front of it (in terms of DOM order).

$("#trigger").bind("click", function () {
    $(this).prev().trigger('edit');
});