Issue with Conditional Logic in Nested ACF Repeater Fields Not Updating Correct

• Nothing_Israel

• November 30, 2023 at 5:34 pm

Hello ACF Support,

I’m encountering a challenge with nested Advanced Custom Fields (ACF) repeater fields on my WordPress site, specifically involving conditional logic and how it’s handled on the front end.

Setup:

I have a nested structure in my ACF fields, where plaintiff_injury_part_1 is a select field within a repeater field plaintiffs_injuries, which itself is nested within another repeater field plaintiffs_test.
The plaintiff_injury_part_1 field is a select dropdown that triggers conditional logic, displaying different injury types ( amputation, and abdomen which is abbreviated to “abdo” etc.) based on the selection.
Each injury type is a select field within the same repeater row.
Issue:

When an editor changes the injury type from one category to another (e.g., from abdo to amputation), the front end still displays both the new and the previous selections, instead of just the updated one.
I have implemented JavaScript to set the non-selected injury field to null when a different injury type is selected, and this seems to work in the admin area (the non-selected injury field resets to its default ‘-Select-‘ option). However, the front end still shows both injuries.
I’ve also modified my shortcode that outputs these fields to check for null values, yet the issue persists.
What I Need:

I’m looking for a way to ensure that when an injury type is updated in the backend, only the latest selection is reflected on the front end, and any previous selections under different injury types are not displayed.
Code Samples:

Here is the code for creating the short code for these fields (there is some debugging language left in there):

<?php 
function acf_repeater_field_shortcode_plaintiff($atts) {
    global $post;

    if (!$post) return 'No global post object available';

    $atts = shortcode_atts(
        array(
            'field' => 'plaintiffs_test',
        ),
        $atts,
        'acf_repeater_field_plaintiff'
    );

    $output = '';

    if (have_rows($atts['field'], $post->ID)):
        while (have_rows($atts['field'], $post->ID)): the_row();
            $output .= '<div class="repeater-item">';
            // ... other fields ...

      if (have_rows('plaintiffs_injuries')):
    while (have_rows('plaintiffs_injuries')): the_row();
        $output .= '<div class="plaintiffs_injuries">';

        // Debugging lines
        $amputation = get_sub_field('amputation');
        $abdo = get_sub_field('abdo');
        $output .= "<p>Debug Amputation: " . esc_html(var_export($amputation, true)) . "</p>";
        $output .= "<p>Debug Abdo: " . esc_html(var_export($abdo, true)) . "</p>";

        // Check for non-null and non-'null' values
        if (!empty($amputation)) {
                $output .= '<p><strong> Amputation Injury: </strong>' . esc_html($amputation) . '</p>';
            }
            if (!empty($abdo)) {
                $output .= '<p><strong> Abdominal Injury: </strong>' . esc_html($abdo) . '</p>';
            }
        $output .= '</div>';
    endwhile;
endif;

            $output .= '</div>'; // Close .repeater-item div
        endwhile;
    else:
        $output = 'No data found in the ACF Repeater Field.';
    endif;

    return $output;
}

// Now the shortcode
add_shortcode('acf_repeater_field_plaintiff', 'acf_repeater_field_shortcode_plaintiff');

And here is the javascript created to void the field that is not selected, when one makes a new choice.

function my_acf_admin_custom_js() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        // Trigger this when an ACF field within a repeater changes
        $(document).on('change', '.acf-repeater [data-name="plaintiff_injury_part_1"] select', function(e) {
            var $thisSelect = $(this);
            var $repeaterRow = $thisSelect.closest('.acf-row');
            var selectedValue = $thisSelect.val();

            // Reset the 'abdo' field if 'amputation' is selected, and vice versa
            if(selectedValue === 'amputation') {
                $repeaterRow.find('[data-name="abdo"] select').val('').trigger('change');
            } else if(selectedValue === 'abdo') {
                $repeaterRow.find('[data-name="amputation"] select').val('').trigger('change');
            }
        });
    });
    </script>
    <?php
}

Any guidance or insights into what might be causing this behavior and how to resolve it would be greatly appreciated. Thank you for your assistance!

• John Huebner

• December 1, 2023 at 9:38 am

You have to base you logic on the selection in your field that sets the condition and not the fields that are conditional.

ACF does not update fields hidden by conditional logic so the old value will still exist.

$condition = get_sub_field('select_field_name');
if ($condion == 'option 1') {
  $value = 'get_field('conditional_field_1');
} elseif ($condion == 'option 2') {
  $value = 'get_field('conditional_field_2');
}

• Nothing_Israel

• December 6, 2023 at 1:39 pm

THANK YOU! God, I wish I had reached out weeks ago, as you’d have saved me countless hours of trying to figure this out. Thank you again and I hope you’re having an awesome holiday.