Question

[See update for a more precise specification …]

I recently started using the jquery jeditable plugin for my asp.net mvc app. So far so good.

The last post at http://forums.asp.net/p/1541654/3789265.aspx has been incredibly useful and I ended up using it almost verbatim. However, the modeled error behavior is not quite right for my application. In case of an error, they throw away the change, revert the editable region to plain text, and pop up the error message as an alert. That’s fine for short input but unacceptable for longer textarea input.

My question: how can I change the onerror function to revert the editable area to a form seeded with the rejected input to allow for continuous edits?

I guess as a starter I should remove the call to original.reset() but I am not sure what else to call to throw out the placeholder and revert the form.

<h2 class="editable_area" id="Report_Title_<%: Model.report.ReportID %>"><%: Model.report.Title %></h2>
<div class="editable_area" id="Report_HeaderText_<%: Model.report.ReportID %>"><%: Model.report.HeaderText %></div>

<script type="text/javascript" src="../../Scripts/jeditable/jquery.jeditable.js"></script>
<script type="text/javascript">
    $(function () {
        $('.editable_area').each(function (index, element) {

            // Get the property name and menu item id for the AJAX request  
            var identifiers = $(element).attr('id').split('_');
            var target = identifiers[0];
            var property = identifiers[1];
            var id = identifiers[2];

            $(element).editable('/' + target + '/UpdateSettings', {
                name: property,
                submitdata: function (value, settings) {
                    return { 'id': id, '__property': property };
                }, 
                onerror: function (settings, original, xhr) {  
                    var error = eval('(' + xhr.responseText + ')');
                    // This will be reverted by reset. 
                    // $('<span class="field-validation-error">' + error.Message + '</span>').appendTo($(this));  
                    alert(error.Message);  
                    original.reset();  
                },  
                type: 'textarea',
                rows: '10',
                cancel: 'Cancel',
                submit: 'OK',
                indicator: 'Saving...',
                tooltip: 'Click to edit...'
            })
        });
    });
</script>

Thanks,
Duffy

[Update] Looks like the trick involves to avoid setting an indicator, then during onerror refocus on the input field.

Unfortately my partial solution for onerror only works on IE. On firefox, focus() gets caught up in an “ajaxError” event.

           $(element).editable('/' + target + '/UpdateSettings', {
                [...]
                onerror: function (settings, original, xhr) {
                    $('.editable-field-validation-error').remove();
                    var error = eval('(' + xhr.responseText + ')');
                    $('<span class="editable-field-validation-error">' + error.Message + '</span>').prependTo($(this).parent());
                    // This works on IE but not on FireFox due to "ajaxError" event.
                    $(':input:visible:enabled:first', $(this)).focus();
                },
                // indicator: 'Saving...',
                onblur: 'cancel'
            })

Question: how to I prevent the focus and ajaxError events from getting tangled up?

Thanks!

Answer 1

Well, as it turns out the snippet posted in the update above was correct after all. All it took for it to work was a restart of the browser.