Calendar does not trigger jQuery events

[bembelimen]

Steps to reproduce the issue

1. Open an article
2. Apply an onChange jQuery event to the publish down field
   You could use the console and insert:
   jQuery('#jform_publish_down').on('change', function() { alert('test'); });
3. Change the date of the publish down event

Expected result

The event will be triggered (=> alert test)

Actual result

No trigger

Additional comments

I'm not sure, why there is a vanilla JS calendar without any jQuery hooks in a system which relays on jQuery...
To check the event use:
jQuery('#jform_publish_down').trigger('change');

Delegation should probably work, too

[dgrammatiko]

@bembelimen why not:

document.getElementById('jform_publish_down').addEventListener('change', function() { alert('test'); });

??

This works in IE8 and all other browsers, so honestly I don't see a reason to mix jQuery when native javascript fulfils all our needs.

Any particular reason why we need to care for jQuery's own events?

[bembelimen]

Hi @dgt41 ,
Thank you for your answer!

Could you also say something about event delegation?

(The reason for jQuery events is, that with vanilla JS, I have to implement a mapping for the events...)

[dgrammatiko]

@bembelimen actually looking at the code I didn't see any code for triggering the change event, or I was too hurry. I guess if the event is triggered (vanilla or jQuery) will eventually bubble up to jQuery. Give me few days and I will come back with some more solid answers here

[bembelimen]

https://github.com/joomla/joomla-cms/blob/staging/media/system/js/fields/calendar.js#L237

[bembelimen]

@dgt41 any updates here?

[C-Lodder]

@bembelimen

You can add the onchange event listener to the calendar form field, like so:

<field
    type="calendar"
    onchange="Joomla.inputHasChanged();"
/>

Then in your JS:

var Joomla = Joomla || {};
   
(function(Joomla) {
    Joomla.inputHasChanged = function() {
        alert('changed!');
        // You can do some more jazzy stuff here.
    }

    document.addEventListener('DOMContentLoaded', function() {
        Joomla.inputHasChanged();
    });
})(Joomla);

[bembelimen]

Yeah, but I don't understand why there is no default implementation....

[C-Lodder]

@bembelimen The calendar was a huge change, must have been missed out.

[dgrammatiko]

@bembelimen @C-Lodder well it didn't exist in the old calendar and nobody ask for it during the testing period, but it's fairly simple to add a listener for an event, or dispatch an Event from the calendar.

[bembelimen]

@dgt41 do you have any plans to implement it? That would be great!

[coolcat-creations]

Is still still open? Any hint how to fix it?

[dgrammatiko]

@coolcat-creations supporting jQuery events in 2020 is not very bright idea. It wasn't back in 2017...

[C-Lodder]

Events are events. Doesn't matter if they're called in jQuery or vanilla JS.
I'll start looking into this now.

[C-Lodder]

The problem being is that the value is being set via Javascript, so the normal event listener don't apply. You can add a custom event:

https://github.com/joomla/joomla-cms/blob/4.0-dev/build/media_source/system/js/fields/calendar.es5.js#L236

Add the following to Joomla's core calendar:

const event = new Event('change');
this.inputField.dispatchEvent(event);

Then in your own code:

element.addEventListener('change', () => {
    console.log('has changed')
}, false)

jQuery('#element').on('change', () => {
    console.log('Look Mum....I can use jQuery too!')
})

[ReLater]

Comment #17515 (comment)
by @dunkmark
is SPAM. Please delete.

[Fedik]

please test #32756

[alikon]

closing as we have a pr #32756