Search code examples
jeditable

Truncated text with jEditable

So I have an editable line of text on my website. Whenever the text is changed and is above a certain length, I truncate the text.

Simplified jsfiddle here - http://jsfiddle.net/3kwCr/1/

On subsequent clicks on the text to edit, the truncated value with ellipsis is picked up. How do I get jEditable to pick up the actual value which is present as an attribute in the div?

data: function() { $('.editable-value').attr('value') }

will not work as I have several of these editable lines of text

I need something like

data: function() { this.attr('value') }

where this would the div object to which .editable has been applied to.

Solution

  • Just wrap this into jQuery object so you can use jQuery methods on it. Below is updated code. I also updated the example jsFiddle.

    $('.editable').editable(function(value, settings) { 
    $(this).attr('value', value);
    if (value.length > 10) {
        return(value.slice(0,10)) + '...';
    } else {
        return(value);
    }
}, { 
    data    : function(value) { return($(this).attr('value')); },      
    type    : 'text',
    submit  : 'OK'
});