Question

I’m using tapestry 5.3.3 (which includes the patch for issue #1844)…

Is there a simple way to catch and handle the ‘onchange’ event, ie where the user selects a new date (via the popup)?

I’ve tried:

<t:datefield value="dateValue" onchange="alert('here');" />

Thanks, Paul.

Answer 1

It seems I have to combine a both approaches to achieve what I need – whether or not this should be improved within the tapestry framework is up for debate….

<t:datefield t:id="selectedDateElem" id="selectedDateElem" onchange="alert('1 onchange attribute');" />

    $("selectedDateElem").observe("change", function(event)
        {
            alert("2 change observer");
        });

    document.observe(Tapestry.FOCUS_CHANGE_EVENT, function(event)
        {
            if (Tapestry.currentFocusField && Tapestry.currentFocusField.id == "selectedDateElem")
                alert("3 focus change observer");
        });

Test Case 1:

• User clicks into input field
• user alters value of input field
• user clicks out of input field
• –> “1 onchange attribute” & “2 change observer”

Test case 2:

• User clicks datepicker icon
• user selects a new date from popup
• –> “3 focus change observer”

So the onchange attribute is equivalent to the change observer, therefore the only complete solution is to combine approaches 2 & 3:

     $("selectedDateElem").observe("change", function(event)
        {
            Page.dateFieldChanged();
        });

    document.observe(Tapestry.FOCUS_CHANGE_EVENT, function(event)
        {
            if (Tapestry.currentFocusField && Tapestry.currentFocusField.id == "selectedDateElem")
                Page.dateFieldChanged();
        });