错误处理的jQuery插件编辑

问题描述：

我最近使用jQuery jeditable插件我的asp.net MVC应用程序启动。到现在为止还挺好。

在http://forums.asp.net/p/1541654/3789265.aspx的最后一篇文章已经非常有用，我最终使用它几乎逐字。但是，对于我的应用程序，建模错误行为并不完全正确。如果发生错误，他们会放弃更改，将可编辑区域恢复为纯文本，并将错误消息作为警报弹出。对于短输入而言，这很好，但对于较长的textarea输入而言不可接受。

我的问题：如何更改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>

谢谢，达菲

[更新]看起来像特技涉及避免设置指示符，那么过程的onerror输入栏重新聚焦。

不幸的是，我的onerror的部分解决方案只适用于IE。在Firefox上，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' 
      })

问题：如何防止焦点和ajaxError事件纠结？

谢谢！

答

那么，事实证明上面更新中发布的代码片段是正确的。它所需要的只是浏览器的重启。

错误处理的jQuery插件编辑

相关推荐