jEditable new value is not set

Question

When I trigger jeditable I want to set the initial textarea value to an empty string, hence:

function wireupTagInPlaceEditing() {
    $('.newtag-editable-target').editable(submitTagEdit, {
        event: 'tagthumbnailnewtag',
        type: 'textarea',
        submit: 'Ok',
        cancel: 'Cancel',
        cssclass: 'tag-inplace-textarea-edit'
    });

    $('.newtag-editable-target').click(function () {
        $(this).trigger('tagthumbnailnewtag');
        $(this).find('textarea').val('');
    });
}
function submitTagEdit(value, settings) {
    alert('tag edit complete ' + value);
}

However, on completion of the edit, value is empty (even though I have entered something). Do I need to do something special to wire-up the value and settings parameters? I am using jeditable 1.7.1

Edit Snippet of my html:

<ul><li><div class="tagtitle">Machine</div><div class="tagtext" tagkey="xx8REtGOuEiPGwRuTxtC7w==">Articulated Truck</div></li><li><div class="tagtitle">Machine</div><div class="tagtext" tagkey="93yW9fJP7EeHwmPhKVcXLw==">Backhoe Loader</div></li><li><div class="tagtitle">Machine</div><div class="tagtext" tagkey="/lYmf80zA0u1UBpP9fYwjg==">Cold Planers</div></li><li><div class="tagtitle">Machine</div><div class="tagtext" tagkey="QRK9mI5xlkaWVD1EgSd48A==">Compactors</div></li><li><div class="tagtitle">Machine</div><div class="tagtext" tagkey="s9ckJ+/41U+xU+OZ2vQGvA==">Compact Track and Multi-terrain Loader</div></li><li><div class="tagtitle">Machine</div><div class="tagtext" tagkey="wtdp/loQp0e00akaU3hIvw==">Feller Buncher</div></li><li><div class="tagtitle">Machine</div><div class="tagtext" tagkey="zsaNLg3640ill5KBTJ3QVQ==">Forest Machines</div></li><li><div class="tagtitle">Machine</div><div class="tagtext" tagkey="rungSduACkqkoMKR0JKl0Q==">Forwarders</div></li><li><div class="tagtitle">Machine</div><div class="tagtext" tagkey="Qjez3j0CAE26gTbUf9CbJg==">Harvesters</div></li><li><div class="tagtitle">Machine</div><div class="tagtext" tagkey="B6JDNj8HD0yNaSHT5asKMQ==">Hydraulic Excavators</div></li><li><div class="tagtitle">Machine</div><div class="tagtext" tagkey="Ib9gJT8zBkmoVB3KM0eQSw==">Industrial Loaders</div></li><li><div class="tagtitle">Machine</div><div class="tagtext" tagkey="2782jTgXCEevbAsqm1rSnw==">Knuckleboom Loaders</div></li><li><div class="tagtitle">Machine</div><div class="tagtext" tagkey="9dCpblCyxUe4v2Hx8/4ufQ==">Material Handlers</div></li><li class="clickfornewtag"><div class="tagtitle">Machine</div><div class="tagtext newtag-editable-target">click here to add a new Machine tag</div></li></ul>

Edit2 The following amendment works:

$('.newtag-editable-target').click(function () {
        $(this).trigger('tagthumbnailnewtag');
        setTimeout(function () {
            $('.newtag-editable-target').find('textarea').val('');
        }, 1);
    });

No idea what's going on.

Answer 1

Try returning the value in your submitTagEdit function:

function submitTagEdit(value, settings) {
    alert('tag edit complete ' + value);
    return value;
}