Feature Request: Highlight changed fields

[exabrial]

First I just want to say THANK YOU for Omnifaces and your contributions to the JSF spec.

We're implementing this in Javascript/jQuery, but it would be need to have something that's a combination/derivative <o:highLight /> and <f:actionListener type="org.omnifaces.eventlistener.ResetInputAjaxActionListener" /> that highlights changed fields in orange after the user has tabbed to the next field.

Thanks for consideration,
-Jonathan

[BalusC]

"Changed" as compared to the initial DOM element value or as compared to the initial model value or as compared to the current model value?

Imagine a view scoped bean with initial model value of "foo" and input field having <f:ajax blur/change> which updates model value and re-renders input field.

Enduser changes to "bar".

Should this highlight as changed? (likely yes)

And enduser later changes back to "foo" without reloading the page.

Should this highlight as changed? (likely no)

I think most natural would be to compare it to "initial DOM element value" so that the above use case is supported, but then I'm not seeing how exactly an ActionListener would be helpful in this. Do you have an existing implementation / proof of concept?

[exabrial]

Hi Bauke!

So changed as in like you tab between fields. I imagine this would be client-side javascript addition ideally with not server interaction.

I'm not seeing how exactly an ActionListener would be helpful in this

I don't know the technical term, apologies!

Here's our initial implementation in js, if those was something that could be added to an input via a property automatically that'd be great. If you can point me in the right direction on which JSF thing to research and implement, I'd love to take a stab at this:

$(document).ready(function() {
	attachChangeHandlers();
	jsf.ajax.addOnEvent(rebindChangeHandlers);
});

function rebindChangeHandlers(data) {
	if (data.status !== "begin") {
		attachChangeHandlers();
	}
}

function attachChangeHandlers() {
	$(".form-control").not(".preppedForChangedInput").change(function(eventData) {
		$(eventData.target).css("border", ".15em solid orange");
		$(eventData.target).addClass("changedInput");
	});
	$(".form-control").not(".preppedForChangedInput").addClass("preppedForChangedInput");
}

[BalusC]

It's doable fully client side and I think it's better to do this fully client side.

Only tiny issue is that OmniFaces uses Vanilla JS.

I'll let this sink a bit.

Bauke ;)

[BalusC]

I still think this is a great idea. But things get complex when e.g. PrimeFaces comes into play. A lot of specialized components fire the change event into a hidden input. The source retrieved in the global change event listener would then represent that hidden input instead.