Отслеживание изменений в веб-приложении

Question

У меня есть приложение, в котором пользователю необходимо увидеть изменения, внесенные во время последнего редактирования. В результате изменений я имею в виду изменения, внесенные во все входы, такие как текстовое поле, выпадающие списки.

Я пытаюсь реализовать это, показывая фоновое изображение справа вверху, а затем, когда пользователь нажимает на это фоновое изображение, отображается всплывающее окно, которое показывает разницу. Я использую прототип 1.7.0.

Мой первый вопрос будет: -
1. Что было бы лучшим подходом для реализации этой функции?
2. Можно ли установить onClick на фоновое изображение?

Answer 1

Есть некоторые функции в библиотеке jQuery, которые, я считаю, были бы полезны для вас. Если вы используете прототип, я бы предположил, что есть некоторые аналогичные функции, которые вы можете использовать.

Я хотел бы предложить писать код, как это:

var $input = $('input').add('textarea').add('select'); 

$input.each(function() { 
var id = $(this).attr('id'); 
var value = $(this).val(); 
var hiddenId = 'hidden' + id; 
var newHiddenInput = $("<input type='hidden'").val(value).attr('id',hiddenId); 
$(this).after(newHiddenInput); 
}); 

Приведенный выше код будет создан новый скрытый вход для каждого входа, текстовое поле и выберите на вашей странице. Он будет иметь то же значение, что и его дубликат. Он будет иметь идентификатор, эквивалентный добавлению идентификатора со словом «скрытый».

Я не знаю, можно ли прикрепить обработчик клика к фоновому изображению. Если ваши входы заключены внутри <div>, вы можете получить желаемый результат, присоединив обработчик кликов к вашему div.

В любом случае вы должны иметь старые значения, в которых вы можете легко сравнить их с вводом пользователя, чтобы вы могли подготовить сводку разницы.

Answer 2

Прототип дает нам Hash класс, который почти идеально подходит для этого, но не хватает способ вычисления разницы с другой хэш, поэтому давайте добавим, что ...

Hash.prototype.difference = function(hash) 
{ 
    var result = this.clone(); 
    hash.each(function(pair) { 
     if (result.get(pair.key) === undefined) 
      // exists in hash but not in this 
      result.set(pair.key, pair.value); 
     else if (result.get(pair.key) == pair.value) 
      // no difference so remove from result 
      result.unset(pair.key); 
     // else exists in this but not in hash 
    }); 
    return result; 
}; 

Это не способ сказать, если элемент был нажат только на фоновое изображение - вы можете узнать координаты, где он был нажат, но это не является надежным, особенно потому, что CSS3 добавляет сложности, такие как несколько фонов и переходов. Лучше иметь абсолютно позиционированный элемент, чтобы действовать как кнопка.

$('button-element').observe('click', function() { 
    var form_values = $H($('form-id').serialize(true)); 
    if (old_values) { 
     var differences = old_values.difference(form_values); 
     if (differences.size()) { 
      showDiffPopup(differences); 
     } 
    } 
    window.old_values = form_values; 
}); 
// preset current values in advance 
window.old_values = $H($('form-id').serialize(true)); 

Все, что остается реализовать showDiffPopup показать вычисленного differences.