jquery可编辑插件的错误处理

Question

有关更精确的规范，请参阅更新...

我最近开始在我的asp.net mvc应用程序中使用jquery jeditable插件。到目前一切尚好。

http://forums.asp.net/p/1541654/3789265.aspx上的最后一篇文章非常有用，我几乎一字不差地使用它。然而，建模的错误行为对于我的应用程序来说并不是很正确。如果出现错误，它们会丢弃更改，将可编辑区域恢复为纯文本，并弹出错误消息作为警告。这对于较短的输入是很好的，但对于较长的文本区输入是不可接受的。

我的问题是:如何更改onerror函数以将可编辑区域恢复为以被拒绝的输入为种子的表单，以允许连续编辑？

我想作为一个开始，我应该删除对original.reset()的调用，但是我不确定还应该调用什么来丢弃占位符并恢复表单。

<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>

谢谢，达菲

Update的诀窍在于避免设置指示器，然后在onerror期间将焦点重新放在输入字段上。

不幸的是，我的onerror部分解决方案只适用于IE。在火狐上，focus()会被一个"ajaxError“事件捕获。

           $(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'
            })

问:如何防止focus和ajaxError事件纠缠在一起？

谢谢!

Answer 1

好吧，事实证明，上面更新中发布的代码片段毕竟是正确的。只要重启浏览器，它就能正常工作。