InputfieldRepeater reloaded event triggered multiple times on wrong elements #1978
Description
There is a JavaScript reloaded event that is triggered when an inputfield is AJAX-loaded.
- reloaded: Triggered on an .Inputfield element after it has reloaded via ajax.
In the example below I have a template containing one text field and one repeater field. Both fields have their visibility set to "Closed + Load only when opened (AJAX)". The same behaviour would apply in other situations where fields are AJAX-loaded, e.g. insider repeater items.
I have this hook to log the reloaded events to the browser console:
$wire->addHookAfter('ProcessPageEdit::buildFormContent', function(HookEvent $event) {
$event->return->appendMarkup .= <<<EOT
<script>
$(document).on('reloaded', '.InputfieldText', function(event) {
console.log('reloaded text field');
});
$(document).on('reloaded', '.InputfieldRepeater', function(event) {
console.log('reloaded repeater field');
});
</script>
EOT;
});In this first case I have 3 items inside the repeater field, with each item consisting of only a title field.
After opening (i.e. AJAX-loading) the text inputfield and then the repeater inputfield the console shows this:
The text inputfield shows the expected result - that it has been "reloaded" once. But the repeater inputfield shows that it has been "reloaded" 16 times. This isn't correct because there is only a single InputfieldRepeater and it has been AJAX-loaded once.
Next I've changed the hook JS to log the target of the reloaded event. I've also removed two of the repeater items so there is now only a single item in the repeater (to reduce the number of lines logged).
$wire->addHookAfter('ProcessPageEdit::buildFormContent', function(HookEvent $event) {
$event->return->appendMarkup .= <<<EOT
<script>
$(document).on('reloaded', '.InputfieldText', function(event) {
console.log(event.target);
});
$(document).on('reloaded', '.InputfieldRepeater', function(event) {
console.log(event.target);
});
</script>
EOT;
});
The console shows the expected result for the text inputfield - the target is the .InputfieldText wrapping element.
As before, there are multiple reloaded events for the single repeater field, and none of targets are the .InputfieldRepeater wrapping element.
The correct result for the repeater should be a single reloaded event triggered on the .InputfieldRepeater element. Triggering the reloaded event multiple times for a single AJAX-loading event causes problems for JS code that listens for the reloaded event and should only fire the number of times the inputfield is actually reloaded (once).
Setup/Environment
- ProcessWire version: 3.0.241