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

Automagically delete repeat group JS

deant

Active Member
Hi to all,

Im got stuck in a problem how to automagically delelt repeat groups. Short description of my scenario:
Lets say we sell car spare parts. If we sell watter pump we also sell gasket, belt, pulley etc. So, in may first group are "main" items in second group are related data items. Both selecting elements are CDD elements. Depending on selection in a first group I can automagically add and set elements in second repeated group...So if we delete item in first group we need to delete related items from second repeat group too. I can find ids of those related data and here Im stuck...
I thing I need to find out repaet markers of items whitch I need to delete...or Im wrong?

Any halep would be appreciated.
 
Do I understand correct that you are deleting the row from your main table and want also related repeat table values to be deleted? When you set "Data->Joins->Delete joined data->yes" in your main list setting, doesn't it delete the related table rows in that case?
 
HI juuser,

We are on the input form and dealing with interactivity - so it is JS and Ajax. BTW my so called "main" and "related data" are not master-child...they are two different tables and they are linked with dbjoin element

Example data in table_2:
id_item_2=825, id_item_1=514, other data...
id_item_2=1225, id_item_1=514, other data...
id_item_2=1837, id_item_1=NULL, other data...

In my case we have form called WorkOrder..its similar like Invoice but instead of one repeat goup we have two repeated gropus - items_1 and items_2. When we add new item_1 in repeat_group_1 we add corresponding item_2 in repeat_group_2. In many cases we can have a form which has only item_2 or vice versa.

OK I have ids of item_2 whitch I need to delete... Problem is how to find item_2 ids in subGroup and delete subGroup,

Maybe is now more clear.


.
 
Ok, I think I'm almost getting the point :)

You would probably need form Javascript added in "form_XX.js" file:
http://fabrikar.com/forums/index.php?wiki/form-javascript-objects/
http://fabrikar.com/forums/index.php?wiki/form-javascript/

In first repeat group element deletion you would need to trigger the code on "group delete event" to identify the elements in the second repeat group which have join_element_id of the element deleted in first group.
For this you might need user ajax:
http://fabrikar.com/forums/index.php?wiki/user-ajax/

And then trigger the deletion of these groups.
 
@ juuser thank you and I appreciate for your effort and time you spet in forum to help other people but you did't tell me nothing new.
I allready read all wiki and quite a lot of posts in different formus but i'm still in the twilight zone...

And then trigger the deletion of these groups.

For example I need to delete id=65 and id=115...how can I get/read in witch subGurop are this ids? Should I set deletion subGroup somethnig like: subGroup[12]?
Because I'm not a professional progremmer I need more detail instructions maybe with some chunks of code.
 
Unfortunately I had no idea what you had already read or tried. Most of the users don't read the wiki, do not find the right article or aren't aware of it's existance at all. That's why I usually suggest to start from there.

Complexity level of your scenario is above average, so it would need quite some time to determine your exact setup, set it up in a test environment and write / test the code. You might get lucky, but I think it cannot be expected in a community level support.

Just start to solve your issue step by step. Take the first step, try to find the solution to this in wiki and forums, etc. There are surprisingly many useful forum treads in here. Or you might try to get a quote for this from the Fabrik developers through Media A-Team.
 
Last edited:
Finally I found solution for programmatically add or delete repaet group items on a form.

If anyone needs it just let me know.

P.s.
As it turns out I will eventually learn JS as well ;)
 
As I described my case above I have two repeats groups(groupA and groupB).In groupA I have dbjon element to select items from table_A. In groupB I have dbjon element to select items from table_B.In table_B I have dbjoin element table_A to create related data(many - to - one).

First we need to create some control fields to store data before / after event in each group.Lets give a name of those two elements...in groupA we need to store "old" id of selected item eg.tableA_22_repeat___id_item_old.In groupB we need to store id item of groupA to find later which items we have to delete.Let this element be named tableB_23_repeat___id_itemA_chk.

First part of code for adding/deleting related items in repeat groupB is set on dbjoin element in group 22; event onChange call function: add_delete_itemsB(this);
I hope you know how tu use and set user_ajax - not explained here

JavaScript:
function add_delete_itemsB(el) {

    var form = Fabrik.getBlock('form_xx');
    var repeat = el.getRepeatNum();
    var id_itemA = el.form.formElements.get('tableA_22_repeat___id_itemA_' + repeat).getValue();
    var id_item_old = el.form.formElements.get('tableA_22_repeat___id_item_old_' + repeat).getValue();

    var groupId = 23;
    var group = el.form.form.getElement('#group' + groupId);
    var subGroup = group.getElements('.fabrikSubGroup');

    // first we delete existing items of group 23 - when we re-select item in group 22 we delete previus added related items in group 23
    // set some logic when we need deletion
    if (id_itemA != null && id_itemA != 'undefined' && id_item_old != null && id_item_old != 'undefined' && id_item_old.length > 0 && id_itemA != id_item_old) {
        // console.log('true');
            document.getElements('input[id^="tableB_23_repeat___id_itemA_chk_"]').each(function (el, index) {
                var id_itemA_chk = form.formElements.get(el.id).getValue();
                if (id_itemA_chk == id_item_old) {
                k = index;
                var del_btn = form.form.getElements('#group' + groupId + ' .deleteGroup')[k];
                var del_e = new Event.Mock(del_btn, 'click');
                form.deleteGroup(del_e, group, subGroup[k]);
                //console.log('deleting index' + k);
            }
        });
    }

    // adding ites to group 23
    if (id_itemA != '') {
        if (id_item_old == '') {
            update: document.id('tableA_22_repeat___id_item_old_' + repeat).value = id_itemA;
        }
        //  user_ajax to get related ids of itemB
        var url = "index.php?option=com_fabrik&format=raw&task=plugin.userAjax";
        new Request({
            url: url,
            data: {
                method: 'get_ids_itemB',
                'ids_itemA': ids_itemA
            },
            onComplete: function(response) {
                // decode response and convert it to JS array
                json = JSON.decode(response);
                var ids_itemB = [];
                var ids_itemB = JSON.parse(response);
                //    console.log(ids_itemB.length);
                if (!Array.isArray(id_itemB) || !id_itemB.length) {
                    // console.log('No related data.');
                } else {
                    alert('We will add: ' + id_itemB.length + ' itemB');
                    // loop over array and add repeats in group 23
                    for (var i = 0; i < ids_itemB.length; i++) {
                        // check if first item in group 23 have valaue
                        var id_itemB = el.form.formElements.get('tableB_23_repeat___id_itemB_0').getValue();
                        // lets see how many items already have in group 23; c is our "repeat" counter for group 23
                        var c = $('group23').getElements('.fabrikSubGroup').length;
                        // if first item of group not have value we put first id_itemB from array otherwise it will be skipped
                        if (id_itemB == '') {
                            // set values into elments
                            update: document.id('tableB_23_repeat___id_itemB_0').value = Object.values(id_ventil[i]);
                            update: document.id('tableB_23_repeat___id_itemA_chk_' + c).value = id_itemA;       // to know which itemB is related with itemA
                            update: document.id('tableA_22_repeat___id_item_old_' + repeat).value = id_itemA;   // to store id_itemA. if we change selection id_itemA we need previus value to know which id_itemB we need to delete
                        }
                        else {
                            var add_btn = el.form.form.getElement('#group23 .addGroup');
                            var add_e = new Event.Mock(add_btn, 'click');
                            el.form.duplicateGroup(add_e, false);
                            update: document.id('tableB_23_repeat___id_itemB_' + c).value = Object.values(id_ventil[i]);
                            update: document.id('tableB_23_repeat___id_itemA_chk_' + c).value = id_itemA;       // to know which itemB is related with itemA
                            update: document.id('tableA_22_repeat___id_item_old_' + repeat).value = id_itemA;   // to store id_itemA. if we change selection id_itemA we need previus value to know which id_itemB we need to delete
                        }
                    }
                }
            }
        }).send();
        update: document.id('tableA_22_repeat___id_item_old_' + repeat).value = id_itemA;
    }
};

Second part is used when we delete item from group 22 on clicking minus icon
Just use Fabrik built-in Form events...

JavaScript:
requirejs(['fab/fabrik'], function () {
    Fabrik.addEvent('fabrik.form.group.delete', function (form, event) {
        // allmost same code ass above

        var form = Fabrik.getBlock('form_xx');

        var group = event.target.getParent('.fabrikGroup');
        var subGroup = event.target.getParent('.fabrikSubGroup');

        // find which delete button is clicked
        delIndex = 0;
        group.getElements('.deleteGroup').each(function (b, x) {
            if (b.getElement('i') === event.target) {
                delIndex = x;
            }
        }.bind(this));

        var groupId = 23;
        var group = form.form.getElement('#group' + groupId);
        var subGroup = group.getElements('.fabrikSubGroup');

        document.getElements('input[id^="tableB_23_repeat___id_itemA_chk_"]').each(function (el, index) {
            var id_itemA_chk = form.formElements.get(el.id).getValue();
            if (id_itemA_chk == id_item_old) {
                k = index;
                var del_btn = form.form.getElements('#group' + groupId + ' .deleteGroup')[k];
                var del_e = new Event.Mock(del_btn, 'click');
                form.deleteGroup(del_e, group, subGroup[k]);
                //console.log('deleting index' + k);
            }
        });
    }
});

The second part of the code may not work like out of the box. I use it in conjunction with the code to prevent deletion by user startpoint (thanks) https://fabrikar.com/forums/index.p...e-row-based-on-ajax-result.45552/#post-234994

P.S. possible typo errors in code but the point is to get an idea and starting points ;)
 
Last edited:
After some serious testing, it turned out that the deletion code was not working properly. Some of item in groupB was not deleted.
I was trying to delete 19 repeats. Befor deletion repeat index are from 6 to 24 - all these index should be deleted. After deletion I still have 5 repeats with index in this order 13, 9, 14, 10, 11. But the console said that the deleted indexes was from 6 - 19. It also mess up repeat index from 0 - 6 although we did not change them.

upload_2020-8-23_21-23-41.png

Error:
line 132: document.getElements('input[id^="tableB_23_repeat___id_itemA_chk_"]').each(function (el, index) {
line 133: var id_itemA_chk = form.formElements.get(el.id).getValue();

Can some one explain me how can this happen?
 
OK just found it. I assume the programaticlly button clicking is to o fast so i added delay to the code

JavaScript:
document.getElements('input[id^="tableB_23_repeat___id_itemA_chk_"]').each(function (el, index) {
                var id_itemA_chk = form.formElements.get(el.id).getValue();
                if (id_itemA_chk == id_item_old) {
                setTimeout(function() {
                     k = index;
                     var del_btn = form.form.getElements('#group' + groupId + ' .deleteGroup')[k];
                     var del_e = new Event.Mock(del_btn, 'click');
                     form.deleteGroup(del_e, group, subGroup[k]);
                    //console.log('deleting index' + k);     
                }, 100);
            }
        });
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top