Question

I have a field that I’m outputting text into after doing an nl2br(). I’ve made the field editable by users. However, I don’t want users to see the <br>s when they click edit.

This is my function:

$(this).editable({
    type: 'textarea',
    submit: 'Save',
    cancel: 'Cancel',
    editClass: 'editable',
    onEdit: function(content) {
        $(this).html($(this).text());
    },
    ...
});

$(this).html($(this).text()) doesn’t work. By the time the onEdit fires, the text inside the tag is gone. Any ideas? I can paste more code if needed, but I didn’t think it was necessary.

If I do a $(this).val('whatever'); instead, nothing gets replaced.

Answer 1

Got it! jQuery.editable adds a textarea inside the parent tag and removes the previously existent text.

This works:

text = $(this).text();
$(this).editable({
    type: 'textarea',
    submit: 'Save',
    cancel: 'Cancel',
    editClass: 'editable',
    onEdit: function(content) {
        $(this).find('textarea.editable').val(text);
    },
    ...
});