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

[Nico van de Kamp]

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]

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]

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]

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.

To view this discussion on the web, visit https://groups.google.com/d/msgid/joomla-dev-general/61d30bb5-8940-48a5-8e8c-dd602852064ao%40googlegroups.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.