Home › Forums › Backend Issues (wp-admin) › showNotice on repeater field.
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”.
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');
@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
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.