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

Question

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

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

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

Answer 1

Прототип дает нам класс 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.

Answer 2

В библиотеке 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);
});

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

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

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