2010-11-02 72 views
1

[用於更精確說明,請參見更新...]錯誤處理的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事件糾結?

謝謝!

回答

0

那麼,事實證明上面更新中發佈的代碼片段是正確的。它所需要的只是瀏覽器的重啓。