FixMe J5 Radio buttons to button group in repeated group

[kouwearie]

Im having an issue with the radio buttons, when setting them to a button group in a repeated group, there is no way to change the cloned button in the repeated group. The page scrolls back to first non cloned radio button group and when changing this value, the cloned value is also updated.
Any simple fix for this? Besides just using the radio buttons as radio buttons.

 

[kouwearie]

The fabrikSubElementContainer id and the "label for" arent corresponding with the content of the elementcontainer. Label for is pointing to the non cloned element. So instead of repeat_radio_1 it still is radio_0

Also the added classes to the repeated "fabrikSubGroupElements" nodes are corresponding to the original_node_0 and not original_node_1

Example is output by fabrik repeated radio plugin with bootstrap buttons enabled:


<div class="btn-group" role="group" data-bs-toggle="buttons">

<input type="radio" class="fabrikinput btn-check" name="test_env___myradio[1][]" id="test_env___myradio_1_input_0" value="m"><label for="test_env___myradio_0_input_0" class="btn btn-outline-secondary fabrikgrid_m"><span>male</span></label>
<label for="test_env___myradio_0_input_0" class="btn btn-outline-secondary fabrikgrid_m"><span>male</span></label>
<input type="radio" class="fabrikinput btn-check" name="test_env___myradio[1][]" id="test_env___myradio_1_input_1" value="f"><label for="test_env___myradio_0_input_1" class="btn btn-outline-secondary fabrikgrid_f"><span>female</span></label>
<label for="test_env___myradio_0_input_1" class="btn btn-outline-secondary fabrikgrid_f"><span>female</span></label>
<input type="radio" class="fabrikinput btn-check" name="test_env___myradio[1][]" id="test_env___myradio_1_input_2" value="0" checked="checked"><label for="test_env___myradio_0_input_2" class="btn btn-outline-secondary fabrikgrid_0 active btn-danger"><span>Geen keuze gemaakt</span></label>
<label for="test_env___myradio_0_input_2" class="btn btn-outline-secondary fabrikgrid_0 active btn-danger"><span>Geen keuze gemaakt</span></label>
</div>


So when clicking on this cloned button sets the focus back to
"test_env___myradio[0][]"
because of this:
label for="test_env___myradio_0_input_0"

 

[troester]

Can you try
in plugins\fabrik_element\radiobutton\radiobutton.js
change line 191/192 to
var label = document.getElementById(sub.id).nextElementSibling;
if (label.tagName === 'LABEL') {

You must set Fabrik Options/Debugging to DebugJS to run the uncompressed radiobutton.js

 

[kouwearie]

Can you try
in plugins\fabrik_element\radiobutton\radiobutton.js
change line 191/192 to
var label = document.getElementById(sub.id).nextElementSibling;
if (label.tagName === 'LABEL') {

You must set Fabrik Options/Debugging to DebugJS to run the uncompressed radiobutton.js

Yup, this works.
Only still outputs this for the repeated label


<label for="test_env___myradio_0" class="form-label fabrikLabel ">
myradio </label>
instead of
<label for="test_env___myradio_1" class="form-label fabrikLabel ">
myradio </label>

 

[kouwearie]

Can you try
in plugins\fabrik_element\radiobutton\radiobutton.js
change line 191/192 to
var label = document.getElementById(sub.id).nextElementSibling;
if (label.tagName === 'LABEL') {

You must set Fabrik Options/Debugging to DebugJS to run the uncompressed radiobutton.js

Visually it works, but also the input value needs to be correctly updated. Now when i put a buttongroup up, when changing the radio choice the input stays checked.

 

[kouwearie]

This needs a bump, the radio element doesnt work well in repeated groups if shown as buttongroup.

 

[kouwearie]

Can you try
in plugins\fabrik_element\radiobutton\radiobutton.js
change line 191/192 to
var label = document.getElementById(sub.id).nextElementSibling;
if (label.tagName === 'LABEL') {

You must set Fabrik Options/Debugging to DebugJS to run the uncompressed radiobutton.js

I think to fix the problem this is not recommended. Subgroup layout is not correct, needs to be looked at

 

[kouwearie]

For example this is the output of a repeated group form(The label for="family_members___gender_0">, this should be"family_members___gender_1") :

<div class="fabrikElementContainer plg-radiobutton fb_el_family_members___gender_0 fabrikRepeatGroup___family_members___gender fabrikDataEmpty form-group">
<div class="row mt-3">

(The label's for attribute doesn't match any element id. )<label for="family_members___gender_0" class="form-label fabrikLabel col-sm-2 col-form-label">
gender </label>​

<div class="fabrikElement col-sm-5">
<div class="fabrikSubElementContainer" id="family_members___gender_1">
<div class="btn-group" role="group" data-bs-toggle="buttons">

<input type="radio" class="fabrikinput btn-check" name="family_members___gender[1][]" id="family_members___gender_1_input_0" value="male" fabchecked="1"><label for="family_members___gender_1_input_0" class="btn btn-outline-secondary fabrikgrid_male active btn-success"><span>male</span></label>

<input type="radio" class="fabrikinput btn-check" name="family_members___gender[1][]" id="family_members___gender_1_input_1" value="female"><label for="family_members___gender_1_input_1" class="btn btn-outline-secondary fabrikgrid_female"><span>female</span></label>
</div>
</div><!-- close subElementContainer --></div>

<div class="fabrikErrorMessage">
</div>


</div></div>

 

[kouwearie]

Note: this happens also on date elements in repeated groups.

The issue is with cloning the subgroup. It needs to iterate correctly so the id's classes names and attributes all go from _0 to _1 when cloned and the input should be the default, not copy the values

<div class="fabrikElementContainer plg-radiobutton fb_el_family_members___gender_0 fabrikRepeatGroup___family_members___gender fabrikDataEmpty form-group">
<div class="row mt-3">

(Actually i think this whole label for needs to be correctly updated attributes added, label for is pointing to the first subgroup )<label for="family_members___gender_0" class="form-label fabrikLabel col-sm-2 col-form-label">
gender </label>



<div class="fabrikElement col-sm-5">
<div class="fabrikSubElementContainer" id="family_members___gender_1">
<div class="btn-group" role="group" data-bs-toggle="buttons">

 

[kouwearie]

{
"errorType": "FormLabelForMatchesNonExistingIdError",
"violatingNodeId": 64661,
"violatingNodeAttribute": "for"
}

 

[kouwearie]

Maybe this helps

I runned this in the webconsole:

// Select the form element you want to observe
var form = document.querySelector('form');

// Check if the form element exists
if (!form) {
    console.error('Form not found!');
} else {
    // Callback function to process mutations
    var callback = function(mutationsList, observer) {
        for (var mutation of mutationsList) {
            if (mutation.type === 'childList') {
                console.log('A child node has been added or removed.');
                mutation.addedNodes.forEach((node) => {
                    console.log('Added node:', node);
                });
                mutation.removedNodes.forEach((node) => {
                    console.log('Removed node:', node);
                });
            } else if (mutation.type === 'attributes' && !isExcludedAttribute(mutation.attributeName)) {
                console.log('The ' + mutation.attributeName + ' attribute of ', mutation.target, ' has changed.');
                console.log('Old value:', mutation.oldValue);
                console.log('New value:', mutation.target.getAttribute(mutation.attributeName));
            }
        }
    };

    // Function to check if an attribute should be excluded (e.g., style attributes)
    var isExcludedAttribute = function(attributeName) {
        var excludedAttributes = ['style', 'otherExcludedAttribute'];
        return excludedAttributes.includes(attributeName);
    };

    // Create an instance of the MutationObserver
    var observer = new MutationObserver(callback);

    // Configuration of the observer (what to observe)
    var config = { attributes: true, childList: true, subtree: true, attributeOldValue: true };

    // Start observing the form element
    observer.observe(form, config);

    // To stop observation: observer.disconnect();
}

Result in console.log:

---->VM5699:33 The id attribute of  <div class="fabrikElementContainer plg-radiobutton fb_el_family_members___gender_0 fabrikRepeatGroup___family_members___gender   fabrikDataEmpty form-group">…</div>  has changed.
---->VM5699:33 Old value: null
---->VM5699:33 New value: null
---->VM5699:33 The id attribute of  <div class="fabrikElementContainer plg-radiobutton fb_el_family_members___gender_0 fabrikRepeatGroup___family_members___gender   fabrikDataEmpty form-group">…</div>  has changed.
---->VM5699:33 Old value: slickid__
---->VM5699:33 New value: null
---->VM5699:33 The id attribute of  <div class="fabrikElementContainer plg-radiobutton fb_el_family_members___gender_0 fabrikRepeatGroup___family_members___gender   fabrikDataEmpty form-group">…</div>  has changed.
---->VM5699:33 Old value: null
---->VM5699:33 New value: null
---->VM5699:33 The id attribute of  <div class="fabrikElementContainer plg-radiobutton fb_el_family_members___gender_0 fabrikRepeatGroup___family_members___gender   fabrikDataEmpty form-group">…</div>  has changed.
---->VM5699:33 Old value: slickid__
---->VM5699:33 New value: null
VM5699:33 The id attribute of  <div class="fabrikSubElementContainer" id="family_members___gender_1">…</div>  has changed.
VM5699:33 Old value: family_members___gender_1
VM5699:33 New value: family_members___gender_1
VM5699:33 The id attribute of  <div class="fabrikSubElementContainer" id="family_members___gender_1">…</div>  has changed.
VM5699:33 Old value: slickid__
VM5699:33 New value: family_members___gender_1
VM5699:33 The id attribute of  <div class="fabrikSubElementContainer" id="family_members___gender_1">…</div>  has changed.
VM5699:33 Old value: family_members___gender_1
VM5699:33 New value: family_members___gender_1
VM5699:33 The id attribute of  <div class="fabrikSubElementContainer" id="family_members___gender_1">…</div>  has changed.
VM5699:33 Old value: slickid__
VM5699:33 New value: family_members___gender_1
VM5699:33 The id attribute of  <fieldset class="fabrikGroup" id="group8" style>…</fieldset>  has changed.
VM5699:33 Old value: group8
VM5699:33 New value: group8
VM5699:33 The id attribute of  <fieldset class="fabrikGroup" id="group8" style>…</fieldset>  has changed.
VM5699:33 Old value: slickid__
VM5699:33 New value: group8
VM5699:33 The aria-describedby attribute of  <a class="addGroup btn btn-small btn-success" href="#" data-bs-toggle="tooltip" aria-label="Add&nbsp;groep" data-bs-original-title="Add&nbsp;groep">…</a>  has changed.
VM5699:33 Old value: tooltip663364
VM5699:33 New value

 

[kouwearie]

Repeatcounter keeps the value 0

form_4.addElements(
{"7":[["FbInternalId","families___family_id",
{"repeatCounter":0,"editable":true,"value":"","label":"family id","defaultVal":"",
"inRepeatGroup":false,"fullName":"families___family_id","watchElements":[],"canRepeat":false,"isGroupJoin":false,"mustValidate":false,"validations":false,"joinid":0}],["FbField","families___family_name",{"repeatCounter":0,"editable":true,"value":"","label":"family name","defaultVal":"","inRepeatGroup":false,"fullName":"families___family_name","watchElements":[],"canRepeat":false,"isGroupJoin":false,"mustValidate":false,"validations":false,"joinid":0,"use_input_mask":false,"input_mask":"","geocomplete":false,"mapKey":false,"language":"","scanQR":false}]],"8":[["FbInternalId","family_members___member_id_0",{"repeatCounter":0,"editable":true,"value":"","label":"member id","defaultVal":"","inRepeatGroup":true,"fullName":"family_members___member_id","watchElements":[],"canRepeat":true,"isGroupJoin":true,"mustValidate":false,"validations":false,"joinid":5}],["FbField","family_members___family_id_0",{"repeatCounter":0,"editable":true,"value":"","label":"family id","defaultVal":"","inRepeatGroup":true,"fullName":"family_members___family_id","watchElements":[],"canRepeat":true,"isGroupJoin":true,"mustValidate":false,"validations":false,"joinid":5,"use_input_mask":false,"input_mask":"","geocomplete":false,"mapKey":false,"language":"","scanQR":false}],["FbField","family_members___first_name_0",{"repeatCounter":0,"editable":true,"value":"","label":"first name","defaultVal":"","inRepeatGroup":true,"fullName":"family_members___first_name","watchElements":[],"canRepeat":true,"isGroupJoin":true,"mustValidate":false,"validations":false,"joinid":5,"use_input_mask":false,"input_mask":"","geocomplete":false,"mapKey":false,"language":"","scanQR":false}],["FbField","family_members___last_name_0",{"repeatCounter":0,"editable":true,"value":"","label":"last name","defaultVal":"","inRepeatGroup":true,"fullName":"family_members___last_name","watchElements":[],"canRepeat":true,"isGroupJoin":true,"mustValidate":false,"validations":false,"joinid":5,"use_input_mask":false,"input_mask":"","geocomplete":false,"mapKey":false,"language":"","scanQR":false}],["FbJDateTime","family_members___dob_0",{"repeatCounter":0,"editable":true,"value":null,"label":"dob","defaultVal":"","inRepeatGroup":true,"fullName":"family_members___dob","watchElements":[],"canRepeat":true,"isGroupJoin":true,"mustValidate":false,"validations":false,"joinid":5,"hidden":false,"showtime":false,"timelabel":"time","typing":true,"timedisplay":1,"allowedDates":[],"watchElement":"","id":69,"locale":"nl-NL","calendarSetup":{"inputField":"family_members___dob_0","button":"family_members___dob_0_btn","align":"Tl","singleClick":true,"firstDay":0,"timeFormat":24,"ifFormat":"%Y-%m-%d","dateAllowFunc":null},"advanced":true}],["FbField","family_members___relationship_0",{"repeatCounter":0,"editable":true,"value":"","label":"relationship","defaultVal":"","inRepeatGroup":true,"fullName":"family_members___relationship","watchElements":[],"canRepeat":true,"isGroupJoin":true,"mustValidate":false,"validations":false,"joinid":5,"use_input_mask":false,"input_mask":"","geocomplete":false,"mapKey":false,"language":"","scanQR":false}],["FbField","family_members___occupation_0",{"repeatCounter":0,"editable":true,"value":"","label":"occupation","defaultVal":"","inRepeatGroup":true,"fullName":"family_members___occupation","watchElements":[],"canRepeat":true,"isGroupJoin":true,"mustValidate":false,"validations":false,"joinid":5,"use_input_mask":false,"input_mask":"","geocomplete":false,"mapKey":false,"language":"","scanQR":false}],["FbRadio","family_members___gender_0",{"repeatCounter":0,"editable":true,"value":"","label":"gender","defaultVal":"","inRepeatGroup":true,"fullName":"family_members___gender","watchElements":[],"canRepeat":true,"isGroupJoin":true,"mustValidate":false,"validations":false,"joinid":5,"data":{"male":"male","female":"female"},"allowadd":false,"changeEvent":"click","btnGroup":"1"}]]}
    );

 

[achartier]

Are you doing this work on a test system by chance? One you could take an Akeeba backup of and make available to us? If so please do so and put it somewhere we can get it (dropbox or similar). You can pm me the access details.

 

[kouwearie]

Its a clean install on xamp with latest joomla and fabrik latest with one list in fabrik:

element	Label	Groep
family_id	family id	families
family_name	family name	families
member_id	member id	families- [family_members]
family_id	family id	families- [family_members]
first_name	first name	families- [family_members]
last_name	last name	families- [family_members]
dob	dob	families- [family_members]
relationship	relationship	families- [family_members]
occupation	occupation	families- [family_members]
gender	gender	families- [family_members]

The family members is a repeated group. I have just made this for testing purposes, because i use this kind of structure only with more tables and repeats.

I have this running on an old fabrik version, like a charm.

 

[achartier]

Can I get an Akeeba backup of your test site?

 

[kouwearie]

Can I get an Akeeba backup of your test site?

https://wko-dev.nl/download.php

 

[achartier]

I have the backup now, you can remove it if you like.

 

[achartier]

Hmmm.. it is not happening on my system using your backup. The label for values are being set correctly when I add a new repeat. I have pm'd you with a url address you can see and inspect the html. This will only be available for a short time so please look at and report back asap. Thanks.

 

[kouwearie]

It is also not going right with you either, see the label, it is pointing to its precessors noncloned target

<label for="family_members___gender_0" class="form-label fabrikLabel ">
gender </label>

 

[achartier]

OK, will look at it again.