Question

This might be an easy thing to do that I missed, but I cannot find a way to “reset” the value in a JEditable field. I let the user edit three fields, then press a button to save those three together. This works fine, but once it’s done, I would like to reset my jEditable fields so they have no values and display their placeholder again. The three values entered by the user are displayed somewhere else.

I tried to do $("#myfield").editable('reset'), but that didn’t work.

The only way I found was to call .empty() on those fields and set .editable all over again with my callback function and my settings, but I find this a bit messy.

Any other way?

As requested, here’s an example in Fiddle of what I want to do:

Thanks!

Answer 1

Just do something like this…

A little more specific:

$('.editable').editable('http://www.example.com/save.php', { 
     type     : 'textarea',
     submit   : 'OK',
     callback : function(value, settings) {
         $("#myfield").text('');
     }
});

I think there is a lot to improve but it’s a working version 🙂 Here is what i’ve done so far: http://jsfiddle.net/Wz8x9/3/

Nothing special here. I’ve just stored the default field value in a data attribute…

<div id="field1" data-placeholder="First Name"></div>

Now you can access the value like this:

$('#field1').html($('#field1').attr('data-placeholder'));