add repeat with JS

[digitalDave]

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

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

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?

 

[troester]

var btn = form.form. ?

 

[digitalDave]

It seems to be a problem with this

    var form = Fabrik.blocks[formRef];
    console.log(form);

is undefined.

 

[deant]

It seems to be a problem with this

    var form = Fabrik.blocks[formRef];
    console.log(form);

is undefined.

try var form = Fabrik.getBlock('form_17');

 

[digitalDave]

Thanks for your help

I found a solution by using:

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

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?

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);
}

 

[deant]

Maybe this can halp you... https://github.com/Fabrik/fabrik/blob/master/media/com_fabrik/js/form.js#L1947

var del_e = new Event.Mock(del_btn, 'click');
  this.deleteGroup(del_e, group, subGroup);

 

[digitalDave]

deant
Thank you that did help.

Here is what I came up with thanks to your help

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

deleteRow(this);

 

[digitalDave]

var btn = form.form. ?

Thanks Troester this helped me too