x-editable (twitter bootstrap): how to change the empty value?

Question

I'm using the x-editable plug-in to have in-place edits and it works well.

The following jsfiddle shows an example from their documentation: http://jsfiddle.net/ibrahima_yock/CFNXM/27/

<div>
     <span>Status:</span>
     <a href="#" id="status"></a>
</div>

.

//make status editable
$('#status').editable({
    type: 'select',
    title: 'Select status',
    placement: 'right',
    source: [
        {value: 1, text: 'status 1'},
        {value: 2, text: 'status 2'},
        {value: 3, text: 'status 3'}
    ]
 });

As you can see in the jsFiddle, in the html pane the status is "empty" (written in red). We'd like to translate that word into another language. How can we specify it?

score 35 · Accepted Answer · answered Oct 21 '13 at 12:37

35

You just add this option when setting up the field:

emptytext: 'Leer', // default is 'Empty'

Fiddle: http://jsfiddle.net/Saran/hdVYS/

You can find other options in the documentation.

answered Oct 21 '13 at 12:37

Saran

3,845
3
37
59

@Saran could you give here also solution for the case that the field is .editable('toggleDisabled')? – st35ly Aug 21 '14 at 00:51
@stenly, there's no option "toggleDisabled", so you probably are referring to `disabled: true`. With that option (as in this http://jsfiddle.net/Saran/fggey5mn/1/), the value is cleared (instead of "Leer" being displayed as disabled). That, IMO, is a bug. Feel free to raise an issue here: https://github.com/vitalets/x-editable/issues – Saran Aug 21 '14 at 08:56

score 14 · Answer 2 · answered Feb 23 '16 at 23:01

14

For those who prefer to use attributes, data-emptytext is another way to accomplish this:

<a href='#' id='status' 
    data-placeholder='This text appears when editing' 
    data-emptytext='This text appears when field is empty'> </a>

answered Feb 23 '16 at 23:01

Jonathan Lidbeck

1,555
1
14
15

score 0 · Answer 3 · answered Aug 21 '14 at 23:48

@Saran negative, there is method "toggleDisabled" (bootstrap-editable.js line 1679) which turn off event click propagation. And this is my problem, when I switch it off, value is empty (i would like to see default value for "empty" value). In editable is property "handleEmpty" which clears empty value (bootstrap-editable.js line 1770) in the case that option disabled is to true and value is empty. I am trying to figure out how to rewrite this value to something else without touching library code

x-editable (twitter bootstrap): how to change the empty value?

3 Answers3