JQuery JEditable - How to Add A Visible Edit Me Button?

Question

i love this plugin but the reality is that most people won't realize at first that they can click on the text to edit.

Ideally, it would be nice to add a Button next to the text or a simple [Edit] link that the user clearly sees but never gets submitted via ajax.

Any ideas?

Answer 1

Just add a event to the button which clicks on the jEditable field:

<span class="jeditable">jEditable field</span>
<input type="button" class="jeditable-activate" value="Edit me!" />

And in jQuery:

$('.jeditable-activate').click(function() {
    $(this).prev().click();
});

That should do it. After all, that's the same thing as the user clicking on the element.

Answer 2

Sam3k's comment is useful, but not perfect. It causes the edit button to reshow prior to hiding editable field/buttons. To solve this, I instead added a custom onCancel event.

First added a default to $.fn.editable.defaults for the new event (ie onCancel: {})

Then I added the following code in 2 places in jquery.jeditable.js: (1) when hitting escape, and (2) pressing cancel button.

if ($.isFunction(settings.oncancel)) { settings.oncancel.apply(self); }

That's it.

    $("#emailRow span").editable(url, {
        type: 'text',
        cancel: 'Cancel',
        submit: 'OK',
        onCancel: function() {
            $("#emailEditLink").show();
        }
    });