Form Javascript wiki

[Mono]

I've been reading this in the wiki

http://fabrikar.com/forums/index.php?wiki/form-javascript/

But I can't find where these 2 settings are?

"The edit the repeating group in Fabrik's admin and in the 'Javascript to run when repeat group added' and 'Javascript to run when repeat group removed' fields add:"

Can somebody point it out to me?

 

[troester]

This text is already in the initial version from 2013.
I assume it's outdated, I can't see these options, too.

 

[Mono]

Ok thanks for looking
I'll keep looking for a method to achieve this

 

[cheesegrits]

Yeah, we replaced that with some events:

fabrik.form.group.duplicate
fabrik.form.group.duplicate.end
fabrik.form.group.delete
fabrik.form.group.delete.end

... which you can trigger your code on by adding a ./components/com_fabrik/js/form_X.js (replace X with your numeric form ID), with ...

requirejs(['fab/fabrik'], function(f) {
   Fabrik.addEvent('fabrik.form.duplicate.end', function(form) {
      // your code here
   });
});

The different events take different args (in addition to the form), if you let me know what you are trying to do, I'll explain the args.

The fabrik.form.group.duplicate and fabrik.form.group.delete are run at the start of the processing, and can return false to abort the operation. The 'end' ones are run at the end of processing, after the group has been added or removed, all DOM changes are made, and would typically be where you would "do stuff".

-- hugh

 

[Mono]

Hi Hugh
I have a form 'vehicle_details' with a repeating group 'axle-details' that has a field ' tbl_vehicle_details_6_repeat___axle_number' the first repeat group opens numbered 1. I want the second to open numbered 2 and so on.

Ive been looking to this for help, some of your other work!

http://fabrikar.com/forums/index.php?threads/how-to-get-repeated-group-index-in-javascript.45076/

 

[cheesegrits]

OK, you probably need fabrik.form.group.duplicate.end, which takes the following args ...

requirejs(['fab/fabrik'], function(f) {
   Fabrik.addEvent('fabrik.form.duplicate.end', function(form, event, groupId, repeatCount) {
      // your code here ... update the acle_number with the repeatCount + 1 (it numbers from 0)
      form.formElements.get('tbl_vehicle_details_6_repeat___axle_number_' + repeatCount).update(repeatCount + 1);
   });
});

Note that the repeatCount numbers from 0, so if you want to update your axle element starting at 1, you'll need to add one.

Also note that as per the thread you referenced, you may need to handle deleting groups.

-- hugh

 

[Mono]

Thanks Hugh
As always, spot on!

The deleting groups is a problem for me, the repeatcounter is -1 on a delete, no matter which delete button is used.
I'm trying to work on testing on which group the button was clicked, I only want it to delete the latest group.
It should be in there as the + button works this way.


Perhaps you could explain how this works to help me.

// get the DOM object for this group ...
        var thisGroup = jQuery('#group' + groupid);
        // get a jQuery array of all the subgroups in this group ...
        var allSubGroups = jQuery(thisGroup).find('.fabrikSubGroup');
        // get the sub group the button was clicked on ...
        var targetSubGroup = event.target.getParent('.fabrikSubGroup');
        // find the index of the target subgroup in all groups
        var targetRepeatCount = jQuery.inArray(targetSubGroup, allSubGroups);

 

[cheesegrits]

OK, yup, I can confirm it's not getting the right repeat number. I'm looking now to see why.

-- hugh

 

[cheesegrits]

OK ... fix is committed:

https://github.com/Fabrik/fabrik/commit/ef5724fbb4c3021af486f06081b919d2299045f4

The problem was where where we find the clicked delete button ... we were comparing the delete icons to the target of the event ... but if you don't click exactly on the icon inside the button, the target is the surround A link, not the icon itself. So needed to finagle it so we always grabbed the inner icon from the target.

A github update should fix it.

-- hugh

 

[Mono]

Hugh
I haven't tried it yet, but thank you.

As always fast and efficient!

 

[Mono]

I'm still struggling with this, I have now changed my approach to open a set number of groups based on a dropdown. Then hopefully hide the +/- buttons altogether.
I can code the form so that it opens with a set number of repeats and I can get the value of the dropdown and use this, but I can't work out how to refresh the groups after the change of the dropdown.
Can anyone point me in a good direction?

 

[cheesegrits]

I can code the form so that it opens with a set number of repeats and I can get the value of the dropdown and use this, but I can't work out how to refresh the groups after the change of the dropdown.

I'm not sure what you mean. What are you trying to do after a dropdown selection?

-- hugh

 

[Mono]

On the form that contains the repeat group I have placed a dropdown (tbl_vehicle_details___number_of_axles_on_vehicle) with values 1 to 10.
After a user selects a number I want the repeat group to populate with that number of rows.


I have used this to partially achieve my goal.
http://fabrikar.com/forums/index.php?threads/limit-repeating-group-from-form-element.44173/
I would prefer not to lose any data already entered.

At the moment I am reading up on JavaScript.

 

[cheesegrits]

Have you tried using the built in feature for that?

In the Group settings, Repeat tab, "Repeat Num Element". As per the tooltip:

Optional - you can choose an element which will be used to specify the number of repeats for this group. When the value is changed, the form will automatically add/remove groups to the specified number. The element you choose cannot be in a repeat group.

-- hugh

 

[Mono]

If there is an easy path or a difficult path I always seem to take the difficult path!!!!

Hugh that does exactly what I want when combined with the other code you gave me.

Thanks