1

I have a subform which is working perfectly itself. If I add a new row (+), I have add the function as mentioned on joomla subform documentation:

jQuery(document).on('subform-row-add', function(event, row){ jQuery('.timepicker').timepicker(); // jform_tsch__tsch1__trln / jform_tsch__tsch1__lfld var lcID = 'jform_tsch__' + jQuery(row).data('group') + '__trln'; var flID = 'jform_tsch__' + jQuery(row).data('group') + '__lfld'; var loccode = jQuery('#jform_tsch__' + jQuery(row).data('group') + '__trln').val(); var init = false; jQuery('#'+ lcID).trigger("liszt:updated"); console.log('lcID: ' + lcID + ' - data group: ' + jQuery(row).data('group') + ' - loccode: ' + loccode); getLocationFields(loccode, flID, init); });

So far, this is working perfectly.

But I have also an event selector for event on id and here I have an issue with for the new row if the new row is not first saved:

jQuery('select[id^=jform_tsch__tsch][id$=__trln]').change(function () { //jform_tsch__tsch0__trln //jform_tsch__tsch1__trln var lcid = jQuery(this).attr('id'); //DK, IS var target = lcid.split('__'); //field ID, # var flID = target[0]+'__'+target[1] + '__lfld'; //var fsel = jQuery('#'+subID).val(); var loccode = jQuery(this).val(); var init = false; getLocationFields(loccode, flID, init); });

When an row of the subform is saved, it works perfectly. When I change the select field of

'jform_tsch__tschx__trln'

, then is (geLocationFields) executed.

BUT:
If I add a new row to the subform and I change the select of 'jform_tsch__tsch0__trln', nothing is happening/executed.

If I save the details page incl. the new row of the subform and if I change than the value of the select of 'jform_tsch__tsch0__trln', the event trigger is executed.

So it seems to me that the new row is not added to the DOM. Therefore I have add the line

jQuery('#'+ lcID).trigger("liszt:updated");

But that makes no difference.

Anybody have an idea how to get the new row field in jQuery(document).on('subform-row-add', function(event, row){ working with the event selector, without first having to save the details page?

Do I have to add an event listener with jQuery? (but how?)

Do I have to update the DOM in one or other way?

Improve this question
1
  • Please award the green tick to one of the answers below so that this page is deemed resolved by the system Commented Aug 30, 2020 at 10:56

2 Answers 2

Reset to default
1

I ran in to a similar problem earlier this week, mainly due to the use of showon which I required to make the field required if the showon condition was met; something Joomla 3.X cannot do by default, but I believe is resolved in v4. I got it working, after many experiments, by just moving the things around into a function. Basically here's what I'm doing:

$("body").on("subform-row-add", function() { myFunc(); }

Then I declare myFunc() to do this:

 function myFunc(event, container) { container = container || document; js(container).find('.yourdropdownelement').on('change liszt:updated', function(change, selected) { // do whatever you need to do, then we'll trigger the update on the update; so this function is called recursively. }); js('.yourdropdownelement').trigger('liszt:updated'); } myFunc();
Improve this answer
1

I got a resolution yesterday via another answer on another forum from Mark Dexter, so the credits goes to Mark!

This does the job, but I don't understand how it works. I now have an event selector in an event selector. I was not even aware that this is possible in jQuery.

jQuery(document).on('subform-row-add', function(event, row){ jQuery('.timepicker').timepicker(); // jform_tsch__tsch1__lfld var lcID = 'jform_tsch__' + jQuery(row).data('group') + '__trln'; var flID = 'jform_tsch__' + jQuery(row).data('group') + '__lfld'; var loccode = jQuery('#jform_tsch__' + jQuery(row).data('group') + '__trln').val(); //var loccode = jQuery('#' + lcID).val(); var init = false; jQuery('#'+ lcID + " option:first").attr('selected','selected'); //jQuery('#'+ lcID).trigger("liszt:updated"); //console.log('lcID: ' + lcID + ' - data group: ' + jQuery(row).data('group') + ' - loccode: ' + loccode); getLocationFields(loccode, flID, init); // MODIFICATION: EVENT SELECTOR COPIED AND PUT IN THIS EVENT SELECTOR, 'FUNCTION IN A FUNCTION' or EVENT SELECTOR IN AN EVENT SELECTOR !!!??? jQuery('select[id^=jform_tsch__tsch][id$=__trln]').bind('change', function () { //jQuery('select[id^=jform_tsch__tsch][id$=__trln]').change(function () { //jform_tsch__tsch0__trln //jform_tsch__tsch1__trln var lcid = jQuery(this).attr('id'); //DK, IS var target = lcid.split('__'); //field ID, # var flID = target[0]+'__'+target[1] + '__lfld'; //var fsel = jQuery('#'+subID).val(); var loccode = jQuery(this).val(); var init = false; getLocationFields(loccode, flID, init); }); });

Mark explanation is:

I think the problem is that the select control does not exist on page load, so the on change function cannot be bound to it. The select is created when you click on the subform "add" button, so it exists when the on-group-add event is fired. So binding the control to the change event works at that point.

I will try Grant G's solution as well, I will learn and see what is possible.

Improve this answer
1
  • As I mentioned when I edited your question, please stop signing off with "Thanks BR Nico". All manner of "signoffs" are discouraged on all Stack Exchange sites because they are only noise on the page. If you want people to know your name, you can change your username and/or introduce yourself in your profile. Commented Jul 31, 2020 at 9:49

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.