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

add repeat with JS

Hello
I have created a form with a repeat group, the add and remove buttons are hidden in CSS.
I would like to create my own add repeat button.

I have this function in form_X.js

JavaScript:
function addGroup(formRef, groupId) {
    var form = Fabrik.blocks[formRef];

    // Create mock event
    var btn = form.getElement('#group' + groupId + ' .addGroup');
    if (typeOf(btn) !== 'null') {
      var e = new Event.Mock(btn, 'click');
                   
      // Duplicate group
      form.duplicateGroup(e);
    }
}

And I call it with this code on a button click

JavaScript:
var formRef = 'form_17';
addGroup(formRef, 100);


But I get this error

Uncaught TypeError: can't access property "form", form is undefined

Can someone show me what mistake I am making?
 
Last edited:
Thanks for your help

I found a solution by using:

JavaScript:
function addRow(el){
    var add_btn = el.form.form.getElement('#group100 .addGroup');                     

    var add_e = new Event.Mock(add_btn, 'click');
                                 
    el.form.duplicateGroup(add_e, false);
    }

by calling this from the button with

JavaScript:
addRow(this);

It works fine

I would also like to create a button to remove a row and I assumed that the following would achieve that, but this also adds a new row rather than removing one?

Any thoughts?

JavaScript:
function deleteRow(el){
  var delete_btn = el.form.form.getElement('#group100 .deleteGroup');                     

    var delete_e = new Event.Mock(delete_btn, 'click');
                                 
    el.form.duplicateGroup(delete_e, false);
}
 
Last edited:
deant
Thank you that did help.

Here is what I came up with thanks to your help


Code:
function deleteRow(el){
   var refForm = el.form;
   var groupId = el.groupid;
   var group = refForm.form.getElement('#group' + groupId);
   var b = jQuery(refForm.form.getElements('#group' + groupId + ' .deleteGroup')).last()[0];
   var del_btn = jQuery(b).find('[data-role=fabrik_delete_group]')[0];
 
                    subGroup = jQuery(group.getElements('.fabrikSubGroup')).last()[0];
                   if (typeOf(del_btn) !== 'null') {
                        var del_e = new Event.Mock(del_btn, 'click');
                      refForm.deleteGroup(del_e, group, subGroup);
                   }

}

I called it from the javascript on a button by
Code:
deleteRow(this);
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top