14

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?

Sam3k
  • 960
  • 1
  • 11
  • 22

5 Answers5

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.

Tatu Ulmanen
  • 123,288
  • 34
  • 187
  • 185
  • 1
    This is it! I added $(this).hide(); to the function to hide it and then use onblur to show it again: onblur : function(value, settings) { $(this).next().show(); }, Thanks! – Sam3k Jan 05 '10 at 22:54
  • That's clever :) Glad I could help. – Tatu Ulmanen Jan 05 '10 at 23:15
3

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();
        }
    });
Josh
  • 5,281
  • 3
  • 19
  • 16
3

For "Edit" link, you can use 

<a href="#" onclick="$('.editable_textarea').trigger('click');>edit</a>
user565923
  • 101
  • 1
  • 2
0

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.

Emil Davtyan
  • 13,808
  • 5
  • 44
  • 66
0

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

signonsridhar
  • 145
  • 4
  • 5