обработка ошибок для редактируемого плагина jquery - PullRequest
Новая
       24

обработка ошибок для редактируемого плагина jquery

1 голос
/ 02 ноября 2010

[См. Обновление для более точной спецификации ...]

Недавно я начал использовать 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 работает только в 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'
            })

Вопрос: как предотвратить запутывание событий focus и ajaxError?

Спасибо!

1 Ответ

0 голосов
/ 05 ноября 2010

Ну, как оказалось, фрагмент, размещенный в обновлении выше, был в конце концов правильным. Все, что потребовалось для его работы, было перезагрузкой браузера.

...