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

admin管理员组

文章数量:1193364

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?

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?

• javascript
• jquery
• jeditable
• user-experience

Share Improve this question Follow asked Jan 5, 2010 at 21:54 Sam3kSam3k 95011 gold badge1212 silver badges2222 bronze badges 1

• appelsiini.net/projects/jeditable is the link to the plugin, FYI. – Shawn Steward Commented Jan 5, 2010 at 21:58

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 12

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.

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();
        }
    });

For "Edit" link, you can use

<a href="#" onclick="$('.editable_textarea').trigger('click');>edit</a>

You can add options to jeditable to show the submit button,

$('#editable_field).editable(url...,
{//options
         type: 'text',
         width: 230, /*input field width*/
         style: 'display: inline-block;width:260px', /*form width including input*/
         submit: '<span class="inlineEditSave"><img src="/beta/resource/images/icon/icon_save_check.png"/</span>',                      
...

the submit span with save icon will be appended in the jeditable form

In Jeditable 1.6.0 onblur can be a function :

            } else if ($.isFunction(settings.onblur)) {
                input.blur(function(e) {
                    settings.onblur.apply(self, [input.val(), settings]);
                });
            } else {

So you if you want to hide the edit when the user either clicks out of the edit area set that function as a callback, if you want to hide it only when the user presses cancel then set the onreset setting with a callback.

本文标签： javascriptJQuery JEditableHow to Add A Visible Edit Me ButtonStack Overflow