Targeting ACF sub-fields with Javascript API

Question

How do you target the sub-fields inside a repeater field, so the JS applies to the sub-field when appending new groups???

Been looking, but I got really lost as to where even to start. And the JavaScript API is falling a little short on explaining how to work with repeaters.

I'm working on a form to add orders for a bakery. The form has a repeater which holds the options for each different bread order. In here the select field for TYPE OF DOUGH does much of the pre-selection for the other fields (size, shape, extras).

I've managed to target the select field of TYPE OF DOUGH to send and modify data through AJAX, but when adding another repeater row the code doesn't work.

Here's my code for php and js.

JS

jQuery(document).ready(function ($) {

    // field key for TYPE OF DOUGH select field inside repeater field
    var field = acf.getField("field_609b103fcd576");

    field.on("change", function (e) {
        var value = field.val();

        console.log(value);

        var data = {
            "action": "get_size_options",
            "type_of_dough": value,
        };

        $.ajax({
            url: ajax_object.ajax_url,
            type: "post",
            data: data,
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
        });
    });
});

PHP

// enqueue the scripts
function fw_acf_register_scripts() {

    // enqueue js file with ajax functions
    wp_enqueue_script(
        'acf-ajax-script',
        get_template_directory_uri() . '/assets/js/autopopulate.js',
        ['jquery']
    );

    wp_localize_script(
        'acf-ajax-script',
        'ajax_object',
        ['ajax_url' => admin_url('admin-ajax.php')]
    );
}
add_action('acf/input/admin_enqueue_scripts', 'fw_acf_register_scripts');

// ex. function to get options for the other fields
function get_size_options() {

    $meta_value = fw_get_term_id($_POST['type_of_dough'], 'dough'); 
    // just a function to get the ID for the taxonomy from the slug, 
    // so it just returns a number, say 501 which is then used for the term query

    $size_options = array();

    $terms_args = array(
        'taxonomy'   => 'size',
        'hide_empty' => false,
        'meta_key'   => 'tax_position',
        'orderby'    => 'tax_position',
        'order'      => 'ASC',
    );

    if ($meta_value_masa) {
        $terms_args['meta_query'] = array(
            array(
                'key'     => 'dough',
                'value'   => $meta_value,
                'compare' => 'LIKE',
            ),
        );
    }

    $terms = get_terms($terms_args);

    foreach ($terms as $term) {
        $size_options[$term->term_id] = $term->name;
    }

    wp_send_json($size_options);
    die();
}
add_action('wp_ajax_get_size_options', 'get_size_options');

Targeting ACF sub-fields with Javascript API

0 Answers