rails bootstrap x-editable emptytext

Question

I'm using Bootstrap X-editable in a Rails app. I would like to replace the word empty in a table cell with the name of the field.

The X-editable documentation says the emptytext will replace it.

But, the following doesn't work - I still get empty.

<a href="#" class="answer" data-type="textarea" emptytext="Description" data-pk="1" data-resource="task" data-source="/tasks" data-name="longdesc" data-url="/tasks/<%= task.id %> ">

This is the javascript:

  $(".answer").editable
    placement: 'bottom'

Thanks for the help.

Answer 1

it's not emptytext="Description" but data-emptytext="Description".

<a href="#" class="answer" data-type="textarea" data-emptytext="Description" data-pk="1" data-resource="task" data-source="/tasks" data-name="longdesc" data-url="/tasks/<%= task.id %> ">

You can also do it in javascript instead of inline html.

$('.answer.description').editable({
    placement: 'bottom',
    emptytext: 'Description'
});

EDIT about HTML5

Look here about HTML5 data-attribute. This is why all the x-editable's settings start with data-*.

EDIT Answering your comment

You can do like in the official demo Look at the sex select with the prepend data (and display tweak):

$('#sex').editable({
    prepend: "not selected",
    source: [
        {value: 1, text: 'Male'},
        {value: 2, text: 'Female'}
    ],
    display: function(value, sourceData) {
        var colors = {"": "gray", 1: "green", 2: "blue"},
        elem = $.grep(sourceData, function(o){return o.value == value;});
        if(elem.length) {
            $(this).text(elem[0].text).css("color", colors[value]);
        } else {
            $(this).empty();
        }
    }
}); 

Or you can directly add a sourceData with {value: 0, text: 'Null'}

Answer 2

or you can use

$('.answer').editable({
placement: 'bottom',
defaultValue: 'Description' // for default value
});