ansaurus

Question

JSF - Highlight changed data in table (within transaction) Reusable framework

Answer 1

A:

Doing this clientside is much easier and user-friendlier.

When considering jQuery JS framework, this is as easy as:

$(':input').each(function() {
    $(this).attr('data-original', $(this).val()).change(function() {
        $(this).toggleClass('changed', $(this).val() != $(this).attr('data-original'));
    });
});

in combination with this CSS example:

.changed { background: #fee; }

Here's a working SSCCE. Copy'n'paste'n'run it to see it yourself.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3170317</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
        <script>
            $(document).ready(function(){
                $(':input').each(function() {
                    $(this).attr('data-original', $(this).val()).change(function() {
                        $(this).toggleClass('changed', $(this).val() != $(this).attr('data-original'));
                    });
                });
            });
        </script>
        <style>
            .changed { background: #fee; }
        </style>
    </head>
    <body>
        <form>
            <input value="change">
            <input value="those">
            <input value="inputs">
         </form>
    </body>
</html>

(if you'd like to let it listen on every keypress instead of change and blur, just replace change part in the 2nd JS line by keyup, here's a live demo using keyup)

BalusC 2010-07-03 07:34:04

ansaurus

tags:

views:

answers:

JSF - Highlight changed data in table (within transaction) Reusable framework

related questions