showNotice on repeater field.

• TimR

• October 21, 2018 at 3:28 am

Hey all,
Yeah, me again 🙂

I’ve been playing with data verification and it all works fine now. Except for repeater fields. Or actually, the verification is fine but I cannot return notifications to the or a repeater field.

This is what I’ve got so far for selecting the verification field and the target action field.

var start_date_key = 'field_5bc07de9045d4'
var end_date_key = 'field_5bc07e41045d5';

var $fieldSource = jQuery($this);

var $fieldTarget_id = $input.closest('.acf-row').data('id');
var $fieldTarget = jQuery('[data-id="' + $fieldTarget_id + '"] [data-key="' + $fieldTarget_key + '"] input.hasDatepicker');

$theFieldTarget.showNotice({
            text: msgErrorEndDateIsEarlierThanStartDate,
            type: 'error',       // warning, error, success
            dismiss: true,  // allow notice to be dismissed
        });

showNotice() wont show. The code does work with:
var $theFieldTarget = acf.getField($fieldTarget_key);
Huge but, it now targets the first repeater field it finds. So, actually it doesn’t work.

My thoughts / question:
Is there another way to get a nested/repeater field, other than acf.getField().
Or is there another jquery way to select the target object?

I found that nested fields share a wrapper that is selectable with “data-id”.

• John Huebner

• October 22, 2018 at 2:55 am

Targeting sub fields on a repeater is possible, but a bit more complicated.

You have the half of it here

var $fieldTarget_id = $input.closest('.acf-row').data('id');

What you need to do is use .closest to get the row and then .find to find the other field that you want to target on the same row.

var $row = $input.closest('.acf-row');
var $target = $row.find('[data-key="'+ $fieldTarget_key+'"] input.hasDatepicker');

• TimR

• October 26, 2018 at 10:53 pm

@hube2 John, Yes! That’s it! Thanks. I’ve re-wrote it to make a function that does exactly the same like acf.getField() for fields on the same .acf-row.

This is the result:

You get it with:
var $fieldTarget = rtt_getRowField( $input, $fieldTarget_key );

function rtt_findClosestAcfRow( $el ){
    return $el.closest('.acf-row');
}

function rtt_findInputField( $el, $key ){
    return $el.find('[data-key="'+ $key +'"] input');
}

function rtt_findClosestField( $el ){
    return $el.closest('.acf-field');
}

function rtt_getClosestField( $el ){
    var $field = rtt_findClosestField( $el );
    return acf.getField( $field );
}

function rtt_getRowField($el, $key){
    var $acfRow = rtt_findClosestAcfRow( $el );
    var $inputField = rtt_findInputField( $acfRow, $key);
    return rtt_getClosestField( $inputField );
}

Ah yes, I’ve replaced
return $el.find('[data-key="'+ $key +'"] input.hasDatepicker');
to this and removed “hasDatepicker”
return $el.find('[data-key="'+ $key +'"] input');
This way I can reuse the code to address all the input fields on the same row.
Now you can use all the acf.functions 🙂 🙂

Once again, thanks John for your time and knowledge