Joomla Subform adding row, the selector event is not fired if I change the value of the select element?

32 views
Skip to first unread message

Nico van de Kamp

unread,
Jul 29, 2020, 4:51:05 AM7/29/20
to Joomla! General Development
Hello,

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

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);
       
});

This is working perfect.

But I have also an event selector id and here I have an issue with for the new row if  they are 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__tsch0__trln', then it 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 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 to have saving the details page??

Thanks in advance,

BR,

Nico

Mark Dexter

unread,
Jul 29, 2020, 4:01:26 PM7/29/20
to Joomla! General Development
You could try defining the change function inside the on-subform-add event function. The problem might be that the element doesn't exist when the change function is fired.  

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/joomla-dev-general/61d30bb5-8940-48a5-8e8c-dd602852064ao%40googlegroups.com.

Nico van de Kamp

unread,
Jul 29, 2020, 4:42:00 PM7/29/20
to Joomla! General Development
Hello Mark,

Thanks for you're answer.

First I thought what/ how do you mean "You could try defining the change function inside the on-subform-add event function"?

Than I thought, after writing the sentence above, let's give it a try and do what I think you mean...

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'!!!???
            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);
           
});

       
});

I  think this is whay suggest? And it works, but I really don't understand what is going on?

Yeh maybe understand it. I add the new subform row, this give's change because I add the line give the first option selected. Than this 'selected' is a change of the value, and than the event selector (is this the right name for it) is executed because of it is inside the new 'subform-row-add'.
If it is not done on that place than the 'subform-row-add' is left and the 'change' is forgotten. Something like that.

I have to call twice the 'getLocationFields(loccode, flID, init);', otherwise the other dropdown is not populated at the initial step.

But I'm amazed and confused how this is working. This would never come up to me.

Thanks Mark.

BR.

Nico
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-general+unsub...@googlegroups.com.

Mark Dexter

unread,
Jul 29, 2020, 5:45:45 PM7/29/20
to Joomla! General Development
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. 

Anyway, glad it worked for you.

To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/joomla-dev-general/ccf47e80-17e0-4f00-a96c-ff620648070co%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages