Home Forums Backend Issues (wp-admin) showNotice on repeater field.


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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.