• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

J5 Radio buttons to button group in repeated group

kouwearie

Member
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.
 
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"
 
Last edited:
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
 
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>
 
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.
 
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
 
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>
 
Last edited:
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">
 
Last edited:
Maybe this helps

I runned this in the webconsole:
Code:
// 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:

Code:
---->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
 
Repeatcounter keeps the value 0

Code:
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"}]]}
    );
 
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.
 
Its a clean install on xamp with latest joomla and fabrik latest with one list in fabrik:

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.
 
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.
 
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>
 

Attachments

  • Schermafbeelding 2024-01-22 210424.png
    Schermafbeelding 2024-01-22 210424.png
    38 KB · Views: 23
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top