mare mare - 2 months ago 22
Javascript Question

How to detect changes in primefaces calendar element?

I detect unsaved data within my form in order to warn the user if he leaves the page. This works so far for all elements, except for the primefaces calendar element.

Currently my approach relates to this answer. But this does not work for the calendar element. I found out that the change listener does not work for programmatically set values in general. Probably this is the reason for my problem. So I tried to implement my own very simple "change listener", by registering a click and blur listener to all my calendar elements. In the click listener I temporarily save the current value of the calendar element. In the blur listener I compare the saved value with the current value. But this approach doesn't work, because I'm not able to get the changed value of the calendar element within the blur listener. I tried to get the value in several ways:

$(this).val();
this.value;
$(this).html();
$(this).attr('value');


But in each case I get the old value. So I think the "simple change listener"-approach doesn't work as well.

My primefaces version is 3.4.2.

JSF implementation (probably not relevant) is: Mojarra 2.1.6

Answer

I don't know anything about primefaces but it uses the jquery ui calendar. So you could use the onSelect option of it to detect a change.

$('.hasDatepicker').each(function() {
  var onSelect = $(this).datepicker('option', 'onSelect');
  $(this).datepicker('option', 'onSelect', function() {
    // some change happend here, set your flag that the form is dirty e.g.
    setConfirmUnload(true);
    // we call the original onSelect to not break the primefaces ajax change event
    if(onSelect) { return onSelect.apply(this, arguments); }
  });
});